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
|
|
||||||
27
README.md
27
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.
|
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
|
## Installation
|
||||||
|
|
||||||
### Method 1: Via CDN URL (Recommended)
|
### Via CDN URL (Recommended)
|
||||||
|
|
||||||
1. Go to Jellyfin Dashboard → General → Custom CSS
|
1. Go to Jellyfin Dashboard → General → Custom CSS
|
||||||
2. Paste this code:
|
2. Paste this code:
|
||||||
|
|
||||||
```css
|
```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
|
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
|
2. Go to Jellyfin Dashboard → General → Custom CSS
|
||||||
3. Paste the contents of the file
|
3. Paste the contents of the file
|
||||||
4. Click Save
|
4. Click Save
|
||||||
@@ -28,17 +37,13 @@ Modern CSS theme for Jellyfin media server with custom fonts, smooth animations
|
|||||||
- 📱 Fully responsive layout
|
- 📱 Fully responsive layout
|
||||||
- 🎯 Optimized for desktop and mobile viewing
|
- 🎯 Optimized for desktop and mobile viewing
|
||||||
|
|
||||||
## Manifest
|
|
||||||
|
|
||||||
This theme includes a `manifest.json` for automatic installation via theme repositories and plugins.
|
|
||||||
|
|
||||||
## Repository
|
## Repository
|
||||||
|
|
||||||
https://github.com/OlegTolchin/Tolfin
|
https://git.tolchin.pro/Oleg/Tolfin
|
||||||
|
|
||||||
## Author
|
## Author
|
||||||
|
|
||||||
OlegTolchin
|
Oleg Tolchin
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
@@ -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