Compare commits
70 Commits
f64353c89c
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| db5dd04e1d | |||
| caf7878f84 | |||
| bb6bbc6b5a | |||
| b6f3b2cf55 | |||
| f38ce773d6 | |||
| 030a93fab6 | |||
| 8068b30d56 | |||
| 80f97437d5 | |||
| f0d09d8492 | |||
| c65f8ed136 | |||
| 99043faa0b | |||
| 3c3ebf5250 | |||
| 2b6dfa0ef4 | |||
| 995bf6e4ed | |||
| eff2a5071c | |||
| d787481660 | |||
| eb7bf7bf9d | |||
| 00c2ee32a1 | |||
| c9ecb269f1 | |||
| 324ea99182 | |||
| 73c1beeb48 | |||
| fcedada22d | |||
| 777f2afb7a | |||
| c96d0238eb | |||
| b0dce671c3 | |||
| f9d2f2d9ff | |||
| 0d74f38561 | |||
| e24a6a5918 | |||
| 4cb14836a3 | |||
| 51e45ecf18 | |||
| fd89971fd7 | |||
| a48c075aa8 | |||
| 4d9c0ac666 | |||
| b304e752f9 | |||
| d8354a5ad8 | |||
| 12d9bec244 | |||
| 114e2ed607 | |||
| 205270d576 | |||
| d9dec4eb17 | |||
| 53fc9107bf | |||
| 1bccbd10dc | |||
| 9c36079311 | |||
| 7896cb496c | |||
| 875b141259 | |||
| 280459f2dc | |||
| 0ab13c64d5 | |||
| b9a32c0696 | |||
| fdaaa5642e | |||
| f51eb5e16f | |||
| 02171c21d4 | |||
| a376edc778 | |||
| edd590e380 | |||
| 9c17226be6 | |||
| 2db5eddfb4 | |||
| 308e480307 | |||
| d3baf5c47c | |||
| 84f307739e | |||
| e981daa6d2 | |||
| 589890770f | |||
| 1bd364a669 | |||
| a9f5d3c879 | |||
| a9c840af15 | |||
| 3d923af943 | |||
| 8683e5da2d | |||
| f113d2820f | |||
| b04a0c1ec0 | |||
|
|
c48665e3aa | ||
| 1a72cdb7cb | |||
| 124e8219d0 | |||
| 9239861b8f |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1 +0,0 @@
|
||||
/node_modules
|
||||
25
README.md
25
README.md
@@ -1,21 +1,30 @@
|
||||
# Tolfin
|
||||
<div align="center">
|
||||
<img src="assets/banner.png" alt="Logo" width="250"/>
|
||||
<div align="left">
|
||||
|
||||
#
|
||||
|
||||
Modern CSS theme for Jellyfin media server with custom fonts, smooth animations and responsive design.
|
||||
|
||||
## Note
|
||||
|
||||
This project was created to experiment with CSS settings and correct visual flaws.
|
||||
|
||||
## Installation
|
||||
|
||||
### Method 1: Via CDN URL (Recommended)
|
||||
### Via CDN URL (Recommended)
|
||||
|
||||
1. Go to Jellyfin Dashboard → General → Custom CSS
|
||||
2. Paste this code:
|
||||
|
||||
```css
|
||||
@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/tolfin.css");
|
||||
@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/tolfin.css");
|
||||
```
|
||||
3. Click Save
|
||||
|
||||
### Method 2: Manual
|
||||
### Manual Installation
|
||||
|
||||
1. Download `theme/tolfin.css` from this repository
|
||||
1. Download `tolfin.css` from this repository
|
||||
2. Go to Jellyfin Dashboard → General → Custom CSS
|
||||
3. Paste the contents of the file
|
||||
4. Click Save
|
||||
@@ -28,13 +37,9 @@ Modern CSS theme for Jellyfin media server with custom fonts, smooth animations
|
||||
- 📱 Fully responsive layout
|
||||
- 🎯 Optimized for desktop and mobile viewing
|
||||
|
||||
## Manifest
|
||||
|
||||
This theme includes a `manifest.json` for automatic installation via theme repositories and plugins.
|
||||
|
||||
## Repository
|
||||
|
||||
https://github.com/OlegTolchin/Tolfin
|
||||
https://git.tolchin.pro/Oleg/Tolfin
|
||||
|
||||
## Author
|
||||
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"name": "Tolfin",
|
||||
"description": "Modern CSS theme for Jellyfin with custom fonts, smooth animations and responsive design",
|
||||
"version": "1.0.0",
|
||||
"author": "OlegTolchin",
|
||||
"repository": "https://github.com/OlegTolchin/Tolfin",
|
||||
"url": "https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/tolfin.css",
|
||||
"target": "jellyfin",
|
||||
"categories": ["theme", "css"]
|
||||
}
|
||||
12
package.json
12
package.json
@@ -1,12 +0,0 @@
|
||||
{
|
||||
"name": "tolfin",
|
||||
"version": "1.0.0",
|
||||
"description": "Modern CSS theme for Jellyfin media server",
|
||||
"author": "OlegTolchin",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/OlegTolchin/Tolfin.git"
|
||||
},
|
||||
"homepage": "https://github.com/OlegTolchin/Tolfin#readme"
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
# 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");
|
||||
```
|
||||
@@ -1,10 +0,0 @@
|
||||
/*
|
||||
Этот модуль центрирует секцию "Мои медиа (small)" на главной странице.
|
||||
Полезно для более сбалансированного вида главной страницы.
|
||||
Может использоваться как отдельный модуль.
|
||||
*/
|
||||
|
||||
#indexPage .section0 .itemsContainer.padded-left.padded-right {
|
||||
justify-content: center !important;
|
||||
padding-top: 15px !important;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
/*
|
||||
Этот модуль заменяет логотип Jellyfin на кастомный.
|
||||
Позволяет использовать свой логотип в интерфейсе.
|
||||
Может использоваться как отдельный модуль.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--logo-url: url('https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/assets/logo.png');
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo,
|
||||
.spashLogo {
|
||||
background-image: var(--logo-url) !important;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
/*
|
||||
Этот модуль изменяет цвет индикаторов счётчиков.
|
||||
Простой способ сделать 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);
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
/*
|
||||
Этот модуль делает прогресс-бары плавающими от низа карточки.
|
||||
Полезно для большей видимости прогресс-бара.
|
||||
Может использоваться как отдельный модуль.
|
||||
*/
|
||||
|
||||
: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);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
/*
|
||||
Этот модуль убирает кнопку "Забыли пароль" со страницы входа.
|
||||
Полезно если используется сторонняя система управления пользователями.
|
||||
Может использоваться как отдельный модуль.
|
||||
*/
|
||||
|
||||
#btnResetPassword,
|
||||
.btnForgotPassword {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#loginPage {
|
||||
max-height: 450px;
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
/*
|
||||
Этот модуль скрывает секцию "Мои медиа" с главной страницы Jellyfin.
|
||||
Полезно для более минималистичного вида главной страницы.
|
||||
Может использоваться как отдельный модуль.
|
||||
*/
|
||||
|
||||
#indexPage .section0 .sectionTitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#indexPage .section0 {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
#indexPage .verticalSection.section0 {
|
||||
padding-top: 3em;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
/*
|
||||
Этот модуль делает карточки 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);
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
/*
|
||||
Этот модуль делает карточки актёров меньше при просмотре деталей контента.
|
||||
Полезно для более компактного отображения актёрского состава.
|
||||
Может использоваться как отдельный модуль.
|
||||
Оригинальный код: 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;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
/*
|
||||
Этот модуль делает боковую панель статичной (не прокручивается вместе со страницей).
|
||||
Простой способ сделать 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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user