From d9451e0ec070f1331e715f78b53e55861bb2dcfc Mon Sep 17 00:00:00 2001 From: Oleg Tolchin Date: Sun, 15 Feb 2026 20:50:54 +0300 Subject: [PATCH] Merge base.css and complete.css into tolfin.css --- README.md | 26 +--- manifest.json | 2 +- theme/complete.css | 21 --- theme/{base.css => tolfin.css} | 229 ++++++++++++++++++++++++++++++++- 4 files changed, 231 insertions(+), 47 deletions(-) delete mode 100644 theme/complete.css rename theme/{base.css => tolfin.css} (78%) diff --git a/README.md b/README.md index b989916..2f1939f 100644 --- a/README.md +++ b/README.md @@ -9,39 +9,17 @@ Modern CSS theme for Jellyfin media server with custom fonts, smooth animations 1. Go to Jellyfin Dashboard → General → Custom CSS 2. Paste this code: ```css - @import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/complete.css"); + @import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/tolfin.css"); ``` 3. Click Save ### Method 2: Manual -1. Download `theme/complete.css` from this repository +1. Download `theme/tolfin.css` from this repository 2. Go to Jellyfin Dashboard → General → Custom CSS 3. Paste the contents of the file 4. Click Save -### Method 3: Custom Modules - -You can also import individual modules with base.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"); -/* Add more modules as needed */ -``` - -Available modules: -- `static-sidebar.css` - Static sidebar on desktop -- `central-libraries-small.css` - Centered libraries on homepage -- `change-logo.css` - Custom logo/banner -- `count-indicators.css` - Custom count indicators -- `forgot-password.css` - Hide forgot password button -- `hide-my-media.css` - Hide "My Media" section -- `moving-cards.css` - Card hover animation -- `smaller-cast.css` - Smaller cast cards -- `floating-progress.css` - Floating progress bars - ## Features - 🎨 Modern design with improved aesthetics diff --git a/manifest.json b/manifest.json index 2a586d9..7067c03 100644 --- a/manifest.json +++ b/manifest.json @@ -4,7 +4,7 @@ "version": "1.0.0", "author": "OlegTolchin", "repository": "https://github.com/OlegTolchin/Tolfin", - "url": "https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/complete.css", + "url": "https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/tolfin.css", "target": "jellyfin", "categories": ["theme", "css"] } diff --git a/theme/complete.css b/theme/complete.css deleted file mode 100644 index 19fb677..0000000 --- a/theme/complete.css +++ /dev/null @@ -1,21 +0,0 @@ -/* - ======================================== - TOLFIN - Полная тема для Jellyfin - ======================================== - Полная тема включающая все модули. - Импортирует базовую тему и все модули. -*/ - -/* Импорт базовой темы */ -@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/central-libraries-small.css"); -@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/change-logo.css"); -@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/count-indicators.css"); -@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/forgot-password.css"); -@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/hide-my-media.css"); -@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/moving-cards.css"); -@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/smaller-cast.css"); -@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/modules/floating-progress.css"); diff --git a/theme/base.css b/theme/tolfin.css similarity index 78% rename from theme/base.css rename to theme/tolfin.css index 13aa393..09a98fa 100644 --- a/theme/base.css +++ b/theme/tolfin.css @@ -1,9 +1,10 @@ /* ======================================== - TOLFIN - Базовая тема для Jellyfin + TOLFIN - Полная тема для Jellyfin ======================================== Модернизированная тема с кастомными шрифтами, плавными анимациями и адаптивным дизайном. + Включает все модули. */ /* ======================================== @@ -31,6 +32,14 @@ /* URL изображений */ --banner-url: url('https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/assets/banner.png'); + --logo-url: url('https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/assets/logo.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; /* Высота плавающего прогресса */ } /* ======================================== @@ -919,6 +928,12 @@ progress { margin-bottom: -3px; } +/* Убрать кнопку "Забыли пароль" */ +#btnResetPassword, +.btnForgotPassword { + display: none !important; +} + /* ======================================== МАРКЕРЫ ГЛАВ ВИДЕО ======================================== */ @@ -933,3 +948,215 @@ progress { .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; +} + +/* ======================================== + МОДУЛЬ: КАСТОМНЫЙ ЛОГОТИП + ======================================== */ + +.pageTitleWithDefaultLogo, +.spashLogo { + background-image: var(--logo-url) !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); +}