Restructure project: add base theme and all modules like example

2026-02-15 19:25:13 +03:00
parent 22e6c07715
commit a49d90a98d
26 changed files with 1495 additions and 11 deletions
--- a/theme/modules/README.md
+++ b/theme/modules/README.md
@@ -0,0 +1,109 @@
+# Tolfin Modules
+
+Модули темы Tolfin для Jellyfin. Каждый модуль может использоваться отдельно или в сочетании с другими.
+
+## Доступные модули
+
+### static-sidebar.css
+Делает боковую панель статичной (не прокручивается вместе со страницей) на десктопе.
+
+**Использование:**
+```css
+@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/static-sidebar.css");
+```
+
+---
+
+### central-libraries-small.css
+Центрирует секцию "Мои медиа (small)" на главной странице.
+
+**Использование:**
+```css
+@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/central-libraries-small.css");
+```
+
+---
+
+### change-logo.css
+Заменяет логотип Jellyfin на кастомный.
+
+**Использование:**
+```css
+@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/change-logo.css");
+```
+
+---
+
+### count-indicators.css
+Изменяет цвет индикаторов счётчиков (количество эпизодов, и т.д.).
+
+**Использование:**
+```css
+@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/count-indicators.css");
+```
+
+---
+
+### forgot-password.css
+Убирает кнопку "Забыли пароль" со страницы входа.
+
+**Использование:**
+```css
+@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/forgot-password.css");
+```
+
+---
+
+### hide-my-media.css
+Скрывает секцию "Мои медиа" с главной страницы Jellyfin.
+
+**Использование:**
+```css
+@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/hide-my-media.css");
+```
+
+---
+
+### moving-cards.css
+Делает карточки Jellyfin немного приподнимающимися при наведении.
+
+**Использование:**
+```css
+@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/moving-cards.css");
+```
+
+---
+
+### smaller-cast.css
+Делает карточки актёров меньше при просмотре деталей контента.
+
+**Использование:**
+```css
+@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/smaller-cast.css");
+```
+
+---
+
+### floating-progress.css
+Делает прогресс-бары плавающими от низа карточки.
+
+**Использование:**
+```css
+@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/floating-progress.css");
+```
+
+---
+
+## Использование модулей
+
+### С базовой темой:
+```css
+@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/base.css");
+@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/static-sidebar.css");
+@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/change-logo.css");
+```
+
+### Полная тема (все модули):
+```css
+@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/complete.css");
+```
--- a/theme/modules/central-libraries-small.css
+++ b/theme/modules/central-libraries-small.css
@@ -0,0 +1,10 @@
+/*
+    Этот модуль центрирует секцию "Мои медиа (small)" на главной странице.
+    Полезно для более сбалансированного вида главной страницы.
+    Может использоваться как отдельный модуль.
+*/
+
+#indexPage .section0 .itemsContainer.padded-left.padded-right {
+    justify-content: center !important;
+    padding-top: 15px !important;
+}
--- a/theme/modules/change-logo.css
+++ b/theme/modules/change-logo.css
@@ -0,0 +1,14 @@
+/*
+    Этот модуль заменяет логотип Jellyfin на кастомный.
+    Позволяет использовать свой логотип в интерфейсе.
+    Может использоваться как отдельный модуль.
+*/
+
+:root {
+    --logo-url: url('https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/assets/banner.png');
+}
+
+.pageTitleWithDefaultLogo,
+.spashLogo {
+    background-image: var(--logo-url) !important;
+}
--- a/theme/modules/count-indicators.css
+++ b/theme/modules/count-indicators.css
@@ -0,0 +1,26 @@
+/*
+    Этот модуль изменяет цвет индикаторов счётчиков.
+    Простой способ сделать Jellyfin более современным.
+    Может использоваться как отдельный модуль.
+*/
+
+:root {
+    --show-count-indicators: flex; /* none для скрытия */
+    --count-indicator-colour: rgba(200, 200, 200, 0.75);
+    --played-indicator-colour: rgba(32, 139, 36, 0.75);
+}
+
+.countIndicator {
+    display: var(--show-count-indicators);
+}
+
+.countIndicator,
+.fullSyncIndicator,
+.mediaSourceIndicator,
+.playedIndicator {
+    background: var(--count-indicator-colour);
+}
+
+.playedIndicator {
+    background: var(--played-indicator-colour);
+}
--- a/theme/modules/floating-progress.css
+++ b/theme/modules/floating-progress.css
@@ -0,0 +1,45 @@
+/*
+    Этот модуль делает прогресс-бары плавающими от низа карточки.
+    Полезно для большей видимости прогресс-бара.
+    Может использоваться как отдельный модуль.
+*/
+
+:root {
+    --floating-progress-roundness: .75rem;
+    --floating-progress-height: 10px;
+}
+
+.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);
+}
--- a/theme/modules/forgot-password.css
+++ b/theme/modules/forgot-password.css
@@ -0,0 +1,14 @@
+/*
+    Этот модуль убирает кнопку "Забыли пароль" со страницы входа.
+    Полезно если используется сторонняя система управления пользователями.
+    Может использоваться как отдельный модуль.
+*/
+
+#btnResetPassword,
+.btnForgotPassword {
+    display: none !important;
+}
+
+#loginPage {
+    max-height: 450px;
+}
--- a/theme/modules/hide-my-media.css
+++ b/theme/modules/hide-my-media.css
@@ -0,0 +1,17 @@
+/*
+    Этот модуль скрывает секцию "Мои медиа" с главной страницы Jellyfin.
+    Полезно для более минималистичного вида главной страницы.
+    Может использоваться как отдельный модуль.
+*/
+
+#indexPage .section0 .sectionTitle {
+    display: none;
+}
+
+#indexPage .section0 {
+    padding-top: 1em;
+}
+
+#indexPage .verticalSection.section0 {
+    padding-top: 3em;
+}
--- a/theme/modules/moving-cards.css
+++ b/theme/modules/moving-cards.css
@@ -0,0 +1,13 @@
+/*
+    Этот модуль делает карточки Jellyfin немного приподнимающимися при наведении.
+    Простой способ сделать Jellyfin более современным.
+    Может использоваться как отдельный модуль.
+*/
+
+.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);
+}
--- a/theme/modules/smaller-cast.css
+++ b/theme/modules/smaller-cast.css
@@ -0,0 +1,77 @@
+/*
+    Этот модуль делает карточки актёров меньше при просмотре деталей контента.
+    Полезно для более компактного отображения актёрского состава.
+    Может использоваться как отдельный модуль.
+    Оригинальный код: https://jellyfin.org/docs/general/clients/css-customization/#stylized-and-smaller-cast--crew-info
+*/
+
+#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;
+}
--- a/theme/modules/static-sidebar.css
+++ b/theme/modules/static-sidebar.css
@@ -0,0 +1,34 @@
+/*
+    Этот модуль делает боковую панель статичной (не прокручивается вместе со страницей).
+    Простой способ сделать Jellyfin более современным.
+    Может использоваться как отдельный модуль.
+*/
+
+.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;
+}