Настройка CSS

В «Dashboard> General» поле «Custom CSS» можно использовать для ввода любого переопределения, которое затем будет применено к таблице стилей Jellyfin CSS.

Пользовательский CSS обеспечивает настройку интерфейса, такую как изменение цвета, макета, размера элемента и поведения. Ниже приведен список различных модификаций, которые могут быть применены. Модификации CSS работают как в веб-клиенте, так и в приложении для Android. Код будет применен в том порядке, в котором он написан, чтобы код мог переопределить ранее установленный пользовательский CSS! Важно, что переопределит все. Чтобы узнать больше, см. Специфика CSS. Чтобы реализовать эти изменения, перейдите на «Панель инструментов»> «Основные»> «Пользовательский CSS». Дополнительным источником специфичности является конкретность.

Если у вас мало или совсем нет опыта работы с CSS, вы можете найти различные онлайн-ресурсы и учебные пособия, а также использовать следующие модификации в качестве примеров, довольно легко начать вносить собственные изменения в свой экземпляр Jellyfin.

Обзор CSS

Вы можете узнать больше о CSS, используя такие сайты, как w3school. Ниже приведены некоторые очень основные детали, которые позволят вам вносить элементарные изменения в уже внесенные изменения.

цвета

CSS поддерживает несколько цветовых форматов, большинство из которых обычно шестнадцатеричные. Но текст просто работает тоже. Чтобы получить «желтый», вы можете просто написать «желтый», для этого будет использоваться предустановленный желтый цвет. Для получения определенного цвета необходимо использовать точные данные о цвете, такие как шестнадцатеричные коды ниже.

Некоторые примеры шестнадцатеричных цветовых кодов:

#5dd000 Зеленый
#0000d0 Синий
#d00000 Красный
#00000058 Прозрачный черный

Перейдите сюда для шестнадцатеричной таблицы цветов, чтобы получить код для любого цвета.

Раздел кода или текста между / * и * / обозначает комментарий и будет игнорироваться. Это позволяет добавлять описания того, что делает какой-либо конкретный раздел кода, чтобы его можно было легко идентифицировать. Его также можно использовать для отключения кода без его удаления. Например

/ * Это может быть добавлено над кодом, чтобы сказать вам, что он делает * /

CSS цепочка

CSS может быть объединен в цепочку для изменения различных разделов. Примером этого является мод "Цвет границы". В нем перечислены элементы для изменения и внесены изменения, которые применяются ко всем из них.

Список модификаций

Чтобы применить любой из них, скопируйте и вставьте код CSS в поле «Пользовательский CSS». Чтобы использовать несколько модификаций, просто добавьте их одну за другой в поле. Любой примененный код останется в поле. Чтобы удалить модификацию, удалите или прокомментируйте соответствующий код в поле. Изменения вступают в силу сразу после сохранения страницы конфигурации и не требуют перезапуска.

Индикатор воспроизводится

Это повлияет на индикатор воспроизведения / наблюдения. Замените цветной шестиугольник на значение, которое вы хотите.

Без мода

зеленый

.playedIndicator {i}: #5dd000; }

Темно-прозрачный с использованием шестнадцатеричного RGBA

/ * Сделать наблюдаемый значок темным и прозрачным * /. PlayIndicator {background: #00000058;}

Прозрачное верхнее меню

selfexplanatory

/ * Прозрачность верхнего меню * /. 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);}

Разверните кнопки вкладки

Разверните кнопки табуляции, подсказки, жанры и т. Д. По умолчанию они очень маленькие, особенно на мобильных телефонах.

/ * Отрегулируйте оба параметра "size-Adjusting" и "Size", чтобы изменить размер * /. HeaderTabs.sectionTabs {text-size-Adjust: 110%; размер шрифта: 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} / * Скрыть «ручные» и «забытые» кнопки * / #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;}

Информация о самом маленьком и самом стильном актерском составе

Это кардинально изменит стиль передаваемой информации на нечто очень похожее на то, как это делает плекс. Тема Purple Haze уже содержит информацию о закругленных ролях, но при том же размере, что и все остальное, это переопределение приведет к уменьшению уменьшенных изображений и будет работать со всеми другими темами.

/ * Уменьшить и проецировать квадратные (или круглые) миниатюры * / #castContent .card.overflowPortraitCard.personCard.card-hoverable.cardwithuserdata {ширина: 4,2 см! Важно; размер шрифта: 90%! важный;} #castContent .card.overflowPortraitCard. personaTarjeta.comocon использование данных {ширина: 4,2 см! важно; размер шрифта: 90%! Important;} / * Правильное поведение соотношения сторон изображения, для радиальных плиток установите радиус края равным нулю * / #castContent .cardContent-button.cardImageContainer.coveredImage. cardContento.cardContent-shadow.itemAction.lazy {размер фона: обложка; ! важно; радиус края: 2,5 см;} #castContent .cardContent-button.cardContainer.Cover Изображение 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 Covered Default imageCardBackground.DefaultCardBackground4.CardContent.Card Shade.contentAction {размер фона: cover; ! важно; радиус края: 2,5 см;} #cast Content.card Content.button.Container.Cover Image.defaultCardBackground.DefaultCardBackground5.cardContent.card Shade.content.Action {размер фона: обложка; ! важно; радиус края: 2,5 см;} #castContento. cardScalable {ширина: 3,8 см! важно; высокая: 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;}

Цвет фона

.backgroundConnedor, .dialog, html {цвет фона: #0fd0d0; }

Затемнять фон

Это затемняет фон синего блеска и пурпурной дымки, редактируйте процент в зависимости от того, насколько темным он вам нужен. Нижняя темнее.

/ * Темный фон, работает только с синим свечением * /. BackgroundContainer {background color: #000000; фильтр: яркость (50%);}

Правый заголовок

Это изменяет цвета кнопок приведения, поиска и пользователя в правом верхнем углу.

.headerRight {color: yellow; }

Консольная панель

Измените цвет панели меню слева.

.mainDrawer-scrollContainer {цвет: желтый; }

Общая страница

.контроль панели общего вида {цвет: желтый; }

Цвет границы

Это изменит цвет границы текстовых полей и выпадающих меню.

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

Это повлияет на цвет границы выделенных текстовых полей и раскрывающихся меню.

.emby-input: focus, .emby-textarea: focus, .emby-select-withcolor {border-color: #ffffff! важный; }

Full Header Mod

.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- select {border-color: #fdbe7d;}. backgroundContainer.withBackdrop, .backdropContainer, .backgroundContainer {background: #fdbe7d;} #myPreferencesMenuPage .listItemBodyText, .emby-tab-button [data-index = "0"], div> div> div> a: nth-child (odd),. button-submit,. mainAnimatedPage *: nth-child (нечетный),. 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 (четный),. mainDrawer-scrollContainer *: nth-child (четный),. headerRight *: nth-child (четный) .cancel {цвет: желтый;}

Плавающий сейчас играет элементы управления

/ * фиксированная высота для нижней строки * /: root {--fixed-element-up: 95px;} / * Теперь коснитесь строки в нижнем колонтитуле * /. nowPlayingBar {width: 650px; z-индекс: 10; положение: фиксированное; up: 300px; высота: 120 пикселей; Стиль края: твердый; цвет рамки: белый; цвет фона: черный; левое поле: 50%;} / * только потомок nowPlayingBar * /. nowPlayingBarTop {height: 5px! важный; максимальная ширина: 500 пикселей сверху: 10 пикселей;} / * Панель поиска хода выполнения песни * /. nowBar в usePositionContainer {position :lative; Выше: 1.0em! Важный;} / * Контейнер, содержащий миниатюру альбома, исполнителя и имя альбома * /. NowPlayingBarInfoContainer {position: fixed! Важный; слева: 12 пикселей; верх: 34px; высота: 60 пикселей; width: 1100px;} / * Сохраняет следующий, предыдущий трек, элементы воспроизведения / паузы, следующий и временной элементы * /. nowPlayingBarCenter {position: относительный! важный; слева: 32 пикселя; выше: var (- fixed-element-over); min-width: 500px;} / * Сохраняйте молчание, контейнер с ползунком громкости, кнопки повтора, избранное и пульт дистанционного управления * /. nowPlayingBarRight {width: 402px! важный; слева: -60px;} / * кнопка отключения звука * /. muteButton {позиция: относительная; up: var (- item-up);} / * Регулятор громкости * /. nowPlayingBarVolumeSliderContainer {position :lative; слева: -4px; top: var (- top-element);} / * Переключить кнопку повтора * /. toggleRepeatButton {position: относительный! важный; слева: -20px; top: var (- top-element);} / * Избранное * /. nowPlayingBarUserDataButtons {position :lative; слева: -4px; top: var (- top-element);} / * Удаленное управление * /. remoteControlButton {left: -110px; top: var (- top-element);}

Ссылки сообщества

Некоторые ссылки на места, где пользовательский CSS обсуждался и распространялся.

Пользовательский CSS - обновлен для 10.5.0 от jellyfin

Простой Jellyfin Custom CSS от jellyfin

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