1166 lines
33 KiB
CSS
1166 lines
33 KiB
CSS
/*
|
||
========================================
|
||
TOLFIN - Полная тема для Jellyfin
|
||
========================================
|
||
Модернизированная тема с кастомными шрифтами,
|
||
плавными анимациями и адаптивным дизайном.
|
||
Включает все модули.
|
||
*/
|
||
|
||
/* ========================================
|
||
ПЕРЕМЕННЫЕ ТЕМЫ
|
||
======================================== */
|
||
:root {
|
||
/* Цветовая палитра */
|
||
--theme-background-colour: #101010; /* Основной цвет фона */
|
||
--theme-sidebar-background-colour: #222222; /* Цвет фона боковой панели */
|
||
--theme-menu-background-colour: #3a3a3a80; /* Полупрозрачный цвет фона меню */
|
||
--theme-menu-shadow-colour: #fff3; /* Цвет тени/подсветки элементов меню */
|
||
--theme-base-colour: #696969; /* Базовый акцентный цвет */
|
||
--theme-text-colour: #dbdbdb; /* Цвет текста */
|
||
--theme-restart-colour: #da87287e; /* Цвет кнопки перезапуска (оранжевый) */
|
||
--theme-shutdown-colour: #c21c1c9d; /* Цвет кнопки выключения (красный) */
|
||
--theme-progress-bar-colour: #cfcfcf; /* Цвет прогресс-бара */
|
||
--theme-progress-bar-background-colour: #2c2c2c; /* Фоновый цвет прогресс-бара */
|
||
--theme-progress-bar-transcoding-colour: #eb7e25; /* Цвет прогресса транскодирования */
|
||
--theme-chapter-marker-colour: #dbdbdb; /* Цвет маркера главы */
|
||
--theme-chapter-marker-watched-colour: #4a4a4a; /* Цвет просмотренного маркера главы */
|
||
|
||
/* Общие параметры внешнего вида */
|
||
--theme-roundness: .75rem; /* Скругление углов */
|
||
--theme-blur: 16px; /* Сила размытия фона */
|
||
|
||
/* URL изображений */
|
||
--banner-url: url('https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/assets/banner.png');
|
||
|
||
/* Переменные модулей */
|
||
--show-count-indicators: flex; /* none для скрытия индикаторов */
|
||
--count-indicator-colour: rgba(200, 200, 200, 0.75); /* Цвет индикаторов счётчиков */
|
||
--played-indicator-colour: rgba(32, 139, 36, 0.75); /* Цвет индикатора просмотренного */
|
||
--floating-progress-roundness: .75rem; /* Скругление плавающего прогресса */
|
||
--floating-progress-height: 10px; /* Высота плавающего прогресса */
|
||
}
|
||
|
||
/* ========================================
|
||
ОБЩИЕ СТИЛИ
|
||
======================================== */
|
||
|
||
/* Удаление стандартного контура при фокусе */
|
||
*:focus-visible {
|
||
outline: none;
|
||
}
|
||
|
||
/* Изменение цвета фона основных элементов */
|
||
.backgroundContainer,
|
||
.mainDrawer,
|
||
.drawer-open,
|
||
.nowPlayingPlaylist,
|
||
.nowPlayingContextMenu,
|
||
html {
|
||
background-color: var(--theme-background-colour);
|
||
}
|
||
|
||
/* ========================================
|
||
ХЕДЕР (ВЕРХНЯЯ ПАНЕЛЬ)
|
||
======================================== */
|
||
|
||
/* Стилизация заголовка страницы */
|
||
.layout-desktop [dir="ltr"] .pageTitle {
|
||
margin-left: 1.2em;
|
||
}
|
||
|
||
/* Стилизация заголовка боковой панели */
|
||
[dir="ltr"] .sidebarHeader {
|
||
padding-left: 2em;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* Пункты навигационного меню */
|
||
[dir="ltr"] .navMenuOption {
|
||
padding: .9em 1.2em !important;
|
||
}
|
||
|
||
/* Высота заголовка с логотипом */
|
||
height: 50px;
|
||
}
|
||
|
||
/* Прозрачный хедер */
|
||
.skinHeader {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* Отступы элементов хедера на десктопе */
|
||
.layout-desktop .headerLeft,
|
||
.layout-desktop .headerRight {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
/* Отступы элементов хедера на мобильных устройствах */
|
||
.layout-mobile .headerRight {
|
||
margin: 0 .29em;
|
||
}
|
||
|
||
/* Отступы на странице библиотеки для мобильных */
|
||
.layout-mobile .libraryPage:not(.noSecondaryNavPage) {
|
||
padding-top: 8.5em !important;
|
||
}
|
||
|
||
/* Иконки в кнопках */
|
||
.paper-icon-button-light > div {
|
||
width: 25px;
|
||
height: 25px;
|
||
transform: unset;
|
||
}
|
||
|
||
/* Полупрозрачный хедер */
|
||
.skinHeader.semiTransparent {
|
||
background-color: unset;
|
||
}
|
||
|
||
/* Стилизация вкладок, кнопок и диалоговых окон с размытием фона */
|
||
.headerTabs,
|
||
.headerRight,
|
||
.dialog,
|
||
.raised,
|
||
.fab,
|
||
.paper-icon-button-light:not(
|
||
.headerRight,
|
||
.headerRight .paper-icon-button-light
|
||
),
|
||
.osdHeader .headerLeft .paper-icon-button-light,
|
||
.detailButton,
|
||
.sliderBubble,
|
||
.MuiDataGrid-root,
|
||
.MuiMenu-list,
|
||
.MuiButton-root,
|
||
.toast.toastVisible,
|
||
.guide-date-tab-button.emby-tab-button-active,
|
||
.guide-date-tab-button:focus,
|
||
.MuiTabs-centered .MuiTab-root,
|
||
#skipIntro .emby-button,
|
||
.chapterThumbContainer,
|
||
.chapterThumbTextContainer {
|
||
color: var(--theme-text-colour);
|
||
border-radius: var(--theme-roundness);
|
||
box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||
background-color: var(--theme-menu-background-colour);
|
||
backdrop-filter: blur(var(--theme-blur)) !important;
|
||
-webkit-backdrop-filter: blur(var(--theme-blur)) !important;
|
||
-moz-backdrop-filter: blur(var(--theme-blur)) !important;
|
||
-o-backdrop-filter: blur(var(--theme-blur)) !important;
|
||
-ms-backdrop-filter: blur(var(--theme-blur)) !important;
|
||
}
|
||
|
||
/* Фон диалогового окна */
|
||
.dialogBackdrop {
|
||
background-color: #111;
|
||
}
|
||
|
||
/* Слайдер вкладок */
|
||
.headerTabs .emby-tabs-slider {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Кнопки и элементы в хедере */
|
||
.headerTabs .emby-tab-button,
|
||
.headerRight .paper-icon-button-light,
|
||
.detailButton,
|
||
.sessionCardButton,
|
||
.guideOptions,
|
||
.MuiTabs-centered .MuiTab-root {
|
||
padding: .556em !important;
|
||
margin: 0 .29em !important;
|
||
border-radius: var(--theme-roundness);
|
||
}
|
||
|
||
/* Высота хедера на десктопе */
|
||
.layout-desktop .headerTabs,
|
||
.layout-desktop .headerLeft,
|
||
.layout-desktop .headerRight,
|
||
.layout-desktop .emby-tabs-slider,
|
||
.layout-desktop .raised {
|
||
height: 50px;
|
||
}
|
||
|
||
/* Высота хедера на мобильных */
|
||
.layout-mobile .headerTabs,
|
||
.layout-mobile .headerRight,
|
||
.layout-mobile .emby-tabs-slider,
|
||
.layout-mobile .raised {
|
||
height: 40px;
|
||
}
|
||
|
||
/* Отступ вкладок на десктопе */
|
||
.layout-desktop .headerTabs {
|
||
margin-left: 250px;
|
||
}
|
||
|
||
/* Медиа-запросы для адаптивности хедера */
|
||
@media (max-width: 1599px) {
|
||
.layout-desktop .sectionTabs {
|
||
width: auto;
|
||
align-self: center;
|
||
margin-top: -58px;
|
||
}
|
||
|
||
.layout-desktop .headerRight {
|
||
margin-right: .8em;
|
||
}
|
||
|
||
.layout-mobile .headerTabs {
|
||
margin: 20px auto;
|
||
width: auto;
|
||
}
|
||
|
||
height: 40px;
|
||
}
|
||
}
|
||
|
||
/* Секция вкладок для TV */
|
||
.layout-tv .sectionTabs {
|
||
width: unset;
|
||
}
|
||
|
||
@media (min-width: 100em) {
|
||
.layout-tv .headerTabs {
|
||
margin-top: unset;
|
||
}
|
||
|
||
.layout-mobile .headerTabs {
|
||
margin-top: -1.3em;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 100em) {
|
||
.layout-tv .sectionTabs {
|
||
width: fit-content;
|
||
align-self: center;
|
||
font-size: 125%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 50em) {
|
||
.homeLibraryButton {
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
|
||
/* ========================================
|
||
БОКОВАЯ ПАНЕЛЬ (SIDEBAR)
|
||
======================================== */
|
||
|
||
/* Отключение анимации перехода на десктопе */
|
||
.layout-desktop,
|
||
.touch-menu-la.transition {
|
||
transition: none;
|
||
}
|
||
|
||
/* Отступ боковой панели на мобильных */
|
||
.layout-mobile .mainDrawer {
|
||
padding-top: 1.2em;
|
||
}
|
||
|
||
/* Отступ контента боковой панели на десктопе */
|
||
.layout-desktop .mainDrawer-scrollContainer {
|
||
margin-top: 100px;
|
||
}
|
||
|
||
/* Пункты меню навигации - скругление и ширина */
|
||
.navMenuOption,
|
||
.navMenuOption-selected,
|
||
.navMenuOption:hover,
|
||
.MuiListItem-root,
|
||
.MuiDrawer-paperAnchorLeft .MuiButtonBase-root {
|
||
border-radius: var(--theme-roundness) !important;
|
||
width: 80%;
|
||
margin: auto !important;
|
||
}
|
||
|
||
/* Подсветка при наведении на пункты меню */
|
||
.navMenuOption:hover,
|
||
.listItem:hover,
|
||
.MuiButton-root:hover {
|
||
background-color: var(--theme-menu-shadow-colour);
|
||
}
|
||
|
||
/* Выбранный пункт меню */
|
||
.navMenuOption-selected,
|
||
.Mui-selected {
|
||
background: var(--theme-menu-shadow-colour) !important;
|
||
}
|
||
|
||
/* ========================================
|
||
КАРТОЧКИ КОНТЕНТА
|
||
======================================== */
|
||
|
||
/* Отступ заголовка секции */
|
||
.section0 .sectionTitle {
|
||
padding-top: 1em !important;
|
||
}
|
||
|
||
/* Кнопки прокрутки в секциях */
|
||
.layout-desktop .section0 .emby-scrollbuttons,
|
||
.layout-desktop .section1 .emby-scrollbuttons {
|
||
padding-top: unset;
|
||
}
|
||
|
||
/* Карточки контента - скругление, тень, анимация */
|
||
.cardContent:not(.dashboardSection .cardContent),
|
||
.cardPadder:not(.dashboardSection .cardPadder),
|
||
.blurhash-canvas,
|
||
.dialog,
|
||
.itemSelectionPanel {
|
||
border-radius: var(--theme-roundness) !important;
|
||
box-shadow: inset 0 1px var(--theme-menu-shadow-colour) !important;
|
||
transition: 0.2s;
|
||
}
|
||
|
||
/* Оверлей на карточках */
|
||
.cardOverlayContainer {
|
||
border-radius: var(--theme-roundness) !important;
|
||
box-shadow: inset 0 2px var(--theme-menu-shadow-colour) !important;
|
||
transition: unset;
|
||
}
|
||
|
||
/* Кнопки оверлея на мобильных */
|
||
.layout-mobile .cardOverlayButton {
|
||
padding: unset;
|
||
margin: 5px;
|
||
}
|
||
|
||
.layout-mobile .cardOverlayButtonIcon {
|
||
background: unset !important;
|
||
}
|
||
|
||
/* Кнопки оверлея на десктопе */
|
||
.layout-desktop .cardOverlayContainer > .cardOverlayButton-br .cardOverlayButton {
|
||
padding: unset;
|
||
margin: 5px;
|
||
}
|
||
|
||
/* Фон карточек по умолчанию */
|
||
.defaultCardBackground1,
|
||
.defaultCardBackground2,
|
||
.defaultCardBackground3,
|
||
.defaultCardBackground4,
|
||
.defaultCardBackground5,
|
||
.cardOverlayContainer > .cardOverlayFab-primary {
|
||
background-color: var(--theme-menu-background-colour);
|
||
font-size: 110%;
|
||
}
|
||
|
||
/* Стилизация кнопок при наведении и фокусе */
|
||
.button-submit:focus,
|
||
.paper-icon-button-light:hover:not(:disabled, .btnDelete),
|
||
.raised:hover,
|
||
.emby-tab-button:hover,
|
||
.detailButton:hover,
|
||
.emby-tab-button.show-focus:focus,
|
||
.paper-icon-button-light.show-focus:focus,
|
||
.emby-button.show-focus:focus,
|
||
.alphaPickerButton-tv:focus,
|
||
#skipIntro .emby-button:hover,
|
||
.multiSelectCheckboxOutline {
|
||
border-radius: var(--theme-roundness) !important;
|
||
transform: unset !important;
|
||
-webkit-transform: unset !important;
|
||
-moz-transform: unset !important;
|
||
-o-transform: unset !important;
|
||
-ms-transform: unset !important;
|
||
color: var(--theme-text-colour);
|
||
background-color: var(--theme-menu-shadow-colour) !important;
|
||
}
|
||
|
||
/* Кнопки на TV при фокусе */
|
||
.layout-tv .itemDetailsGroup .emby-button.show-focus:focus {
|
||
padding: 5px 10px;
|
||
}
|
||
|
||
/* ========================================
|
||
НАСТРОЙКИ ПОЛЬЗОВАТЕЛЯ
|
||
======================================== */
|
||
|
||
/* Жирные заголовки */
|
||
.readOnlyContent h2,
|
||
.sectionTitle,
|
||
.dashboardSection h3,
|
||
.MuiListSubheader-root {
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* Убрать границы */
|
||
.listItem-border,
|
||
.itemSelectionPanel {
|
||
border: unset;
|
||
}
|
||
|
||
/* Отступы элементов списка */
|
||
.listItem {
|
||
padding-left: 1.2em !important;
|
||
}
|
||
|
||
/* Скругление элементов при наведении */
|
||
.listItem:hover,
|
||
.MuiButtonBase-root,
|
||
.MuiButtonBase-root:hover,
|
||
.emby-tab-button,
|
||
progress {
|
||
border-radius: var(--theme-roundness);
|
||
}
|
||
|
||
/* Формы и поля ввода */
|
||
.collapseContent,
|
||
.formDialogFooter:not(.formDialogFooter-clear),
|
||
.formDialogHeader:not(.formDialogHeader-clear),
|
||
.paperList,
|
||
.visualCardBox,
|
||
.emby-select-withcolor,
|
||
.emby-input,
|
||
.emby-textarea {
|
||
background-color: var(--theme-menu-background-colour);
|
||
border-radius: var(--theme-roundness);
|
||
box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||
border: unset;
|
||
padding: 10px;
|
||
}
|
||
|
||
/* Отключенный селект */
|
||
.emby-select[disabled] {
|
||
box-shadow: unset;
|
||
}
|
||
|
||
/* Выбор дорожек */
|
||
.trackSelections .selectContainer .detailTrackSelect {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
/* ========================================
|
||
СТРАНИЦА ДЕТАЛЕЙ КОНТЕНТА
|
||
======================================== */
|
||
|
||
/* Изображение контента на десктопе */
|
||
.layout-desktop .detailImageContainer .card {
|
||
width: 250px;
|
||
max-width: unset;
|
||
top: 1.5em;
|
||
left: 0;
|
||
}
|
||
|
||
/* Обратная совместимость с версиями до 10.11.0 */
|
||
.layout-desktop .infoWrapper .detailImageContainer .card {
|
||
padding-top: 8.5em;
|
||
}
|
||
|
||
/* Основной контент страницы деталей */
|
||
.layout-desktop .detailPagePrimaryContent {
|
||
padding-top: 135px;
|
||
padding-left: 300px;
|
||
min-height: 325px;
|
||
}
|
||
|
||
/* Кнопки действий на странице деталей (десктоп) */
|
||
.layout-desktop .mainDetailButtons {
|
||
margin-top: 350px;
|
||
margin-left: 292px;
|
||
position: absolute;
|
||
}
|
||
|
||
/* Кнопки действий на странице деталей (мобильные) */
|
||
.layout-mobile .mainDetailButtons {
|
||
display: flex;
|
||
flex-flow: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
/* Стилизация кнопок действий */
|
||
.mainDetailButtons .detailButton {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding-left: 50px;
|
||
position: relative;
|
||
}
|
||
|
||
/* Текстовые метки для кнопок */
|
||
.btnPlay .detailButton-content:before {
|
||
content: "Play";
|
||
}
|
||
|
||
.btnReplay .detailButton-content:before {
|
||
content: "Replay";
|
||
}
|
||
|
||
.btnDownload .detailButton-content:before {
|
||
content: "Download";
|
||
}
|
||
|
||
.btnPlayTrailer .detailButton-content:before {
|
||
content: "Trailer";
|
||
}
|
||
|
||
.btnInstantMix .detailButton-content:before {
|
||
content: "Instant Mix";
|
||
}
|
||
|
||
.btnShuffle .detailButton-content:before {
|
||
content: "Shuffle";
|
||
}
|
||
|
||
.btnCancelSeriesTimer .detailButton-content:before {
|
||
content: "Cancel Programme";
|
||
}
|
||
|
||
.btnCancelTimer .detailButton-content:before {
|
||
content: "Stop Recording";
|
||
}
|
||
|
||
.btnPlaystate .detailButton-content:before {
|
||
content: "Watched";
|
||
}
|
||
|
||
.btnUserRating .detailButton-content:before {
|
||
content: "Favourite";
|
||
}
|
||
|
||
.btnSplitVersions .detailButton-content:before {
|
||
content: "Split Versions";
|
||
}
|
||
|
||
.btnMoreCommands .detailButton-content:before {
|
||
content: "Options";
|
||
}
|
||
|
||
/* Позиционирование текста кнопок */
|
||
.detailButton-content:before {
|
||
position: relative;
|
||
margin-left: 30px;
|
||
}
|
||
|
||
/* Позиционирование иконок кнопок */
|
||
.detailButton-icon:before {
|
||
position: absolute;
|
||
top: 7px;
|
||
left: 7px;
|
||
}
|
||
|
||
/* Иконки Material Icons */
|
||
.mainDetailButtons .material-icons {
|
||
height: unset;
|
||
}
|
||
|
||
/* Отступы контента страницы деталей */
|
||
.layout-desktop .detailPagePrimaryContainer,
|
||
.layout-desktop .detailPageContent {
|
||
padding-left: 3.3% !important;
|
||
}
|
||
|
||
/* Лента деталей */
|
||
.detailRibbon {
|
||
background: unset;
|
||
padding-left: 0 !important;
|
||
}
|
||
|
||
/* Обёртка информации о контенте */
|
||
.layout-desktop .infoWrapper {
|
||
padding-top: 226px;
|
||
padding-left: 300px;
|
||
}
|
||
|
||
/* Градиентный оверлей на фоне контента */
|
||
.itemBackdrop::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; /* Покрывает весь элемент */
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(180deg, transparent 5%, var(--theme-background-colour));
|
||
pointer-events: none; /* Не интерактивный элемент */
|
||
z-index: 1; /* Поверх изображения */
|
||
}
|
||
|
||
/* Фон контента на мобильных с анимацией */
|
||
.layout-mobile .itemBackdrop {
|
||
margin-top: unset;
|
||
-webkit-animation: backdrop-fadein .8s ease-in normal both;
|
||
animation: backdrop-fadein .8s ease-in normal both;
|
||
}
|
||
|
||
/* Изображение контента на мобильных */
|
||
.layout-mobile .detailImageContainer .card {
|
||
filter: unset;
|
||
-webkit-filter: unset;
|
||
-moz-filter: unset;
|
||
-o-filter: unset;
|
||
-ms-filter: unset;
|
||
padding-left: 2em;
|
||
}
|
||
|
||
/* Логотип контента на десктопе */
|
||
.layout-desktop .detailLogo {
|
||
left: 3%;
|
||
right: unset;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Убрать фон у элементов Material UI */
|
||
.layout-desktop .backgroundContainer.withBackdrop,
|
||
.MuiPaper-root,
|
||
.MuiTabs-indicator {
|
||
background-color: unset;
|
||
background-image: unset;
|
||
box-shadow: unset;
|
||
}
|
||
|
||
/* Кастомный баннер для фона */
|
||
.homeBackdropContainer,
|
||
.backgroundContainer.withBackdrop,
|
||
.itemBackdrop,
|
||
.backdropImage,
|
||
#indexPage .backgroundContainer,
|
||
#indexPage .backdropImage {
|
||
background-image: var(--banner-url) !important; /* ← banner.png везде! */
|
||
}
|
||
|
||
/* Убрать градиентный оверлей на главной странице */
|
||
#indexPage .itemBackdrop::before {
|
||
display: none !important;
|
||
}
|
||
|
||
#indexPage .darkenContent {
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
}
|
||
|
||
/* Размытие фонового изображения */
|
||
.layout-desktop .backdropImage {
|
||
filter: blur(5px);
|
||
-webkit-filter: blur(5px);
|
||
-moz-filter: blur(5px);
|
||
-o-filter: blur(5px);
|
||
-ms-filter: blur(5px);
|
||
}
|
||
|
||
/* Затемнение контента */
|
||
.darkenContent {
|
||
backdrop-filter: blur(5px) brightness(0.75);
|
||
-webkit-backdrop-filter: blur(5px) brightness(0.75);
|
||
-moz-backdrop-filter: blur(5px) brightness(0.75);
|
||
-o-backdrop-filter: blur(5px) brightness(0.75);
|
||
-ms-backdrop-filter: blur(5px) brightness(0.75);
|
||
background: -webkit-linear-gradient(180deg, transparent, var(--theme-background-colour));
|
||
background: -moz-linear-gradient(180deg, transparent, var(--theme-background-colour));
|
||
background: -o-linear-gradient(180deg, transparent, var(--theme-background-colour));
|
||
background: -ms-linear-gradient(180deg, transparent, var(--theme-background-colour));
|
||
background: linear-gradient(180deg, transparent, var(--theme-background-colour));
|
||
}
|
||
|
||
/* Контейнер элементов для TV */
|
||
.itemsContainer-tv {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
/* ========================================
|
||
НАСТРОЙКИ АДМИНИСТРАТОРА
|
||
======================================== */
|
||
|
||
/* Кнопка перезапуска сервера */
|
||
#btnRestartServer {
|
||
box-shadow: inset 0 1px var(--theme-restart-colour) !important;
|
||
}
|
||
|
||
/* Кнопка перезапуска при наведении и уведомления */
|
||
#btnRestartServer:hover,
|
||
.notifications,
|
||
.MuiChip-filledInfo {
|
||
color: var(--theme-text-colour) !important;
|
||
background-color: var(--theme-restart-colour) !important;
|
||
}
|
||
|
||
/* Кнопка выключения и удаления */
|
||
#btnShutdown,
|
||
.btnDelete {
|
||
box-shadow: inset 0 1px var(--theme-shutdown-colour) !important;
|
||
}
|
||
|
||
/* Кнопка выключения при наведении и важные уведомления */
|
||
#btnShutdown:hover,
|
||
.btnDelete:hover,
|
||
.notification_important,
|
||
.MuiChip-filledError {
|
||
color: var(--theme-text-colour) !important;
|
||
background-color: var(--theme-shutdown-colour) !important;
|
||
}
|
||
|
||
/* Иконки элементов списка */
|
||
.listItemIcon:not(.listItemIcon-transparent) {
|
||
border-radius: var(--theme-roundness);
|
||
}
|
||
|
||
/* Кнопки карточки сессии */
|
||
.sessionCardButtons {
|
||
margin: .29em 0;
|
||
}
|
||
|
||
/* Карточки на дашборде */
|
||
.dashboardSection .cardContent {
|
||
border-top-left-radius: var(--theme-roundness);
|
||
border-top-right-radius: var(--theme-roundness);
|
||
}
|
||
|
||
/* Группа кнопок - первая кнопка */
|
||
div[data-role="controlgroup"] a[data-role="button"]:first-child {
|
||
border-bottom-left-radius: var(--theme-roundness);
|
||
border-top-left-radius: var(--theme-roundness);
|
||
}
|
||
|
||
/* Группа кнопок - последняя кнопка */
|
||
div[data-role="controlgroup"] a[data-role="button"]:last-child {
|
||
border-bottom-right-radius: var(--theme-roundness);
|
||
border-top-right-radius: var(--theme-roundness);
|
||
}
|
||
|
||
/* Колонка дашборда */
|
||
.dashboardColumn {
|
||
flex-shrink: inherit;
|
||
}
|
||
|
||
/* ========================================
|
||
БАЗОВЫЕ ЦВЕТА И СЛАЙДЕРЫ
|
||
======================================== */
|
||
|
||
/* Цвет текста для фокусированных элементов и иконок */
|
||
.selectLabelFocused,
|
||
.textareaLabelFocused,
|
||
.inputLabelFocused,
|
||
.mdl-slider,
|
||
.metadataSidebarIcon,
|
||
.button-link,
|
||
.guide-date-tab-button.emby-tab-button-active,
|
||
.guide-date-tab-button:focus,
|
||
#divRunningTasks span,
|
||
.MuiAlert-icon,
|
||
.listItemBodyText span {
|
||
color: var(--theme-text-colour) !important;
|
||
}
|
||
|
||
/* Фон для активных элементов */
|
||
.emby-checkbox:checked + span + .checkboxOutline,
|
||
.listItemIcon:not(
|
||
.listItemIcon-transparent,
|
||
.notification_important,
|
||
.notifications
|
||
),
|
||
.guide-channelHeaderCell:focus,
|
||
.programCell:focus,
|
||
.emby-button.show-focus:focus,
|
||
::selection,
|
||
div[data-role="controlgroup"] a.ui-btn-active,
|
||
.MuiAvatar-root,
|
||
.selectionCommandsPanel {
|
||
background-color: var(--theme-base-colour) !important;
|
||
}
|
||
|
||
/* Цвет границ для чекбоксов и спиннеров */
|
||
.emby-checkbox + span + .checkboxOutline,
|
||
.emby-checkbox:checked + span + .checkboxOutline,
|
||
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline,
|
||
.mdl-spinner__layer-1,
|
||
.mdl-spinner__layer-2,
|
||
.mdl-spinner__layer-3,
|
||
.mdl-spinner__layer-4 {
|
||
border-color: var(--theme-base-colour) !important;
|
||
}
|
||
|
||
/* Слайдер - базовые стили */
|
||
.mdl-slider {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 100%;
|
||
background: transparent;
|
||
}
|
||
|
||
/* Ползунок слайдера - WebKit */
|
||
.mdl-slider::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 0;
|
||
height: 0;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Ползунок слайдера - Firefox */
|
||
.mdl-slider::-moz-range-thumb {
|
||
width: 0;
|
||
height: 0;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Ползунок слайдера - IE/Edge */
|
||
.mdl-slider::-ms-thumb {
|
||
width: 0;
|
||
height: 0;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Фон слайдера */
|
||
.mdl-slider-background-flex,
|
||
.mdl-slider-background-lower,
|
||
.mdl-slider-background-upper {
|
||
border-radius: var(--theme-roundness);
|
||
box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||
height: 10px;
|
||
}
|
||
|
||
/* ========================================
|
||
МАРКЕРЫ ГЛАВ
|
||
======================================== */
|
||
|
||
/* Контейнер маркеров глав */
|
||
.sliderMarkerContainer {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 10px;
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Отдельный маркер главы */
|
||
.sliderMarker {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 2px;
|
||
height: 10px;
|
||
background-color: var(--theme-chapter-marker-colour);
|
||
opacity: 0.6;
|
||
border-radius: 1px;
|
||
pointer-events: auto;
|
||
cursor: pointer;
|
||
transition: opacity 0.2s ease, width 0.2s ease, background-color 0.2s ease;
|
||
}
|
||
|
||
/* Непросмотренный маркер */
|
||
.sliderMarker.unwatched {
|
||
background-color: var(--theme-chapter-marker-colour);
|
||
}
|
||
|
||
/* Просмотренный маркер */
|
||
.sliderMarker.watched {
|
||
background-color: var(--theme-chapter-marker-watched-colour);
|
||
}
|
||
|
||
/* Верхний фон слайдера */
|
||
.mdl-slider-background-upper {
|
||
margin-left: -3px;
|
||
}
|
||
|
||
/* Контейнер фона слайдера */
|
||
.mdl-slider-background-flex-container {
|
||
top: 5px;
|
||
}
|
||
|
||
/* ========================================
|
||
ПРОГРЕСС-БАРЫ
|
||
======================================== */
|
||
|
||
/* Заполненная часть прогресс-бара */
|
||
.innerCardFooter .itemProgressBarForeground,
|
||
.playbackProgress > div,
|
||
.mdl-slider-background-lower,
|
||
.iconOsdProgressInner,
|
||
.taskProgressInner,
|
||
progress {
|
||
background-color: var(--theme-progress-bar-colour) !important;
|
||
}
|
||
|
||
/* Совместимость с разными браузерами для progress */
|
||
progress::-moz-progress-bar {
|
||
background-color: var(--theme-progress-bar-colour);
|
||
}
|
||
progress::-webkit-progress-bar {
|
||
background-color: var(--theme-progress-bar-colour);
|
||
}
|
||
progress::-ms-thumb {
|
||
background-color: var(--theme-progress-bar-colour);
|
||
}
|
||
|
||
/* Прогресс транскодирования */
|
||
.transcodingProgress > div {
|
||
background-color: var(--theme-progress-bar-transcoding-colour) !important;
|
||
}
|
||
|
||
/* Фон прогресс-бара */
|
||
.innerCardFooter .itemProgressBar,
|
||
.backgroundProgress > div,
|
||
.mdl-slider-background-flex,
|
||
.taskProgressOuter,
|
||
progress {
|
||
background-color: var(--theme-progress-bar-background-colour) !important;
|
||
}
|
||
|
||
/* Отступы контента дашборда */
|
||
.layout-desktop .dashboardDocument .content-primary:not(.layout-desktop #dashboardPage .content-primary) {
|
||
padding-left: 2.5em;
|
||
padding-right: 2.5em;
|
||
}
|
||
|
||
/* Заголовок диалогового окна */
|
||
[dir="ltr"] .formDialogHeaderTitle:first-child {
|
||
margin-left: unset;
|
||
}
|
||
|
||
/* ========================================
|
||
ФОРМА ВХОДА
|
||
======================================== */
|
||
|
||
/* Страница входа в систему */
|
||
#loginPage {
|
||
background-color: var(--theme-menu-background-colour);
|
||
border-radius: var(--theme-roundness);
|
||
box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||
padding: unset !important;
|
||
max-width: 750px;
|
||
max-height: 500px;
|
||
margin: 150px auto 0;
|
||
}
|
||
|
||
/* Кнопка входа в ручной форме */
|
||
.manualLoginForm .raised.button-submit.block.emby-button {
|
||
margin-bottom: -3px;
|
||
}
|
||
|
||
/* Убрать кнопку "Забыли пароль" */
|
||
#btnResetPassword,
|
||
.btnForgotPassword {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ========================================
|
||
МАРКЕРЫ ГЛАВ ВИДЕО
|
||
======================================== */
|
||
|
||
/* Контейнер текста миниатюры главы */
|
||
.chapterThumbTextContainer {
|
||
width: fit-content;
|
||
margin: auto;
|
||
}
|
||
|
||
/* Текст миниатюры главы */
|
||
.chapterThumbText {
|
||
width: fit-content;
|
||
}
|
||
|
||
/* ========================================
|
||
МОДУЛЬ: СТАТИЧНАЯ БОКОВАЯ ПАНЕЛЬ
|
||
======================================== */
|
||
|
||
.layout-desktop .mainDrawer,
|
||
.MuiDrawer-paperAnchorLeft {
|
||
left: 0 !important;
|
||
top: 0;
|
||
width: 250px !important;
|
||
background-color: var(--theme-sidebar-background-colour) !important;
|
||
z-index: 100;
|
||
}
|
||
|
||
.layout-desktop .mainDrawerButton,
|
||
.layout-desktop .headerHomeButton {
|
||
display: none;
|
||
}
|
||
|
||
.layout-desktop .libraryPage:not(#editItemMetadataPage) {
|
||
margin-left: 250px;
|
||
width: calc(100% - 250px);
|
||
}
|
||
|
||
.layout-desktop #slides-container {
|
||
margin-left: 320px;
|
||
width: calc(100% - 385px);
|
||
}
|
||
|
||
.layout-desktop .hide-scroll .mainDrawer,
|
||
.layout-desktop .hideMainDrawer .mainDrawer {
|
||
display: none;
|
||
}
|
||
|
||
/* ========================================
|
||
МОДУЛЬ: ЦЕНТРИРОВАННЫЕ БИБЛИОТЕКИ
|
||
======================================== */
|
||
|
||
#indexPage .section0 .itemsContainer.padded-left.padded-right {
|
||
justify-content: center !important;
|
||
padding-top: 15px !important;
|
||
}
|
||
|
||
|
||
/* ========================================
|
||
МОДУЛЬ: ИНДИКАТОРЫ СЧЁТЧИКОВ
|
||
======================================== */
|
||
|
||
.countIndicator {
|
||
display: var(--show-count-indicators);
|
||
}
|
||
|
||
.countIndicator,
|
||
.fullSyncIndicator,
|
||
.mediaSourceIndicator,
|
||
.playedIndicator {
|
||
background: var(--count-indicator-colour);
|
||
}
|
||
|
||
.playedIndicator {
|
||
background: var(--played-indicator-colour);
|
||
}
|
||
|
||
/* ========================================
|
||
МОДУЛЬ: СКРЫТЬ "МОИ МЕДИА"
|
||
======================================== */
|
||
|
||
#indexPage .section0 .sectionTitle {
|
||
display: none;
|
||
}
|
||
|
||
#indexPage .section0 {
|
||
padding-top: 1em;
|
||
}
|
||
|
||
#indexPage .verticalSection.section0 {
|
||
padding-top: 3em;
|
||
}
|
||
|
||
/* ========================================
|
||
МОДУЛЬ: АНИМАЦИЯ КАРТОЧЕК
|
||
======================================== */
|
||
|
||
.cardBox:hover {
|
||
transform: translateY(-2.5px);
|
||
-webkit-transform: translateY(-2.5px);
|
||
-moz-transform: translateY(-2.5px);
|
||
-ms-transform: translateY(-2.5px);
|
||
-o-transform: translateY(-2.5px);
|
||
}
|
||
|
||
/* ========================================
|
||
МОДУЛЬ: МЕНЬШИЕ КАРТОЧКИ АКТЁРОВ
|
||
======================================== */
|
||
|
||
#castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata {
|
||
width: 4.2cm;
|
||
font-size: 90%;
|
||
}
|
||
|
||
#castContent .cardContent-button.cardImageContainer.coveredImage.cardContent.cardContent-shadow.itemAction.lazy {
|
||
background-size: cover;
|
||
-webkit-background-size: cover;
|
||
-moz-background-size: cover;
|
||
-o-background-size: cover;
|
||
}
|
||
|
||
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground1.cardContent.cardContent-shadow.itemAction {
|
||
background-size: cover;
|
||
-webkit-background-size: cover;
|
||
-moz-background-size: cover;
|
||
-o-background-size: cover;
|
||
}
|
||
|
||
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardContent-shadow.itemAction {
|
||
background-size: cover;
|
||
-webkit-background-size: cover;
|
||
-moz-background-size: cover;
|
||
-o-background-size: cover;
|
||
}
|
||
|
||
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itemAction {
|
||
background-size: cover;
|
||
-webkit-background-size: cover;
|
||
-moz-background-size: cover;
|
||
-o-background-size: cover;
|
||
}
|
||
|
||
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground4.cardContent.cardContent-shadow.itemAction {
|
||
background-size: cover;
|
||
-webkit-background-size: cover;
|
||
-moz-background-size: cover;
|
||
-o-background-size: cover;
|
||
}
|
||
|
||
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground5.cardContent.cardContent-shadow.itemAction {
|
||
background-size: cover;
|
||
-webkit-background-size: cover;
|
||
-moz-background-size: cover;
|
||
-o-background-size: cover;
|
||
}
|
||
|
||
#castContent .cardScalable {
|
||
width: 3.8cm;
|
||
height: 3.8cm;
|
||
}
|
||
|
||
#castContent .cardOverlayButton-br {
|
||
bottom: 4%;
|
||
right: 15%;
|
||
width: 70%;
|
||
}
|
||
|
||
#castContent .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {
|
||
margin: auto;
|
||
}
|
||
|
||
#castContent .cardBox:not(.visualCardBox) .cardPadder {
|
||
background-color: unset;
|
||
}
|
||
|
||
#castContent .cardBox:not(.visualCardBox) .cardPadder,
|
||
#castContent .cardContent-shadow {
|
||
box-shadow: unset;
|
||
}
|
||
|
||
/* ========================================
|
||
МОДУЛЬ: ПЛАВАЮЩИЕ ПРОГРЕСС-БАРЫ
|
||
======================================== */
|
||
|
||
.sessionNowPlayingDetails {
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.fullInnerCardFooter,
|
||
.activeSession .backgroundProgress,
|
||
.activeSession .playbackProgress,
|
||
.activeSession .transcodingProgress {
|
||
width: 95%;
|
||
bottom: 10px;
|
||
margin: 0 auto;
|
||
height: var(--floating-progress-height);
|
||
border-radius: var(--floating-progress-roundness) !important;
|
||
-webkit-border-radius: var(--floating-progress-roundness) !important;
|
||
-moz-border-radius: var(--floating-progress-roundness) !important;
|
||
}
|
||
|
||
.itemProgressBar {
|
||
height: var(--floating-progress-height);
|
||
box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||
-webkit-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||
-moz-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||
}
|
||
|
||
.playbackProgress > div,
|
||
.backgroundProgress > div,
|
||
.transcodingProgress > div {
|
||
box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||
-webkit-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||
-moz-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||
border-radius: var(--floating-progress-roundness);
|
||
-webkit-border-radius: var(--floating-progress-roundness);
|
||
-moz-border-radius: var(--floating-progress-roundness);
|
||
}
|
||
|
||
git tag -a v1.0.1 -m "Release v1.0.1"
|
||
git push origin v1.0.1
|
||
git tag -f latest (хеш v1.0.1)
|
||
git push origin latest --force
|