Compare commits
60 Commits
a9f5d3c879
...
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 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1 +0,0 @@
|
||||
/node_modules
|
||||
39
README.md
39
README.md
@@ -1,37 +1,34 @@
|
||||
# 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
|
||||
|
||||
**Note:** The `@latest` link always points to the **latest release** (currently v1.0.1), not the latest commit.
|
||||
### Manual Installation
|
||||
|
||||
### Method 2: Manual
|
||||
|
||||
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
|
||||
|
||||
### Method 3: Specific Version
|
||||
|
||||
You can also use a specific version instead of `@latest`:
|
||||
|
||||
```css
|
||||
@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@v1.0.1/theme/tolfin.css");
|
||||
```
|
||||
|
||||
See [Releases](https://github.com/OlegTolchin/Tolfin/releases) for available versions.
|
||||
|
||||
## Features
|
||||
|
||||
- 🎨 Modern design with improved aesthetics
|
||||
@@ -40,17 +37,13 @@ See [Releases](https://github.com/OlegTolchin/Tolfin/releases) for available ver
|
||||
- 📱 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
|
||||
|
||||
OlegTolchin
|
||||
Oleg Tolchin
|
||||
|
||||
## License
|
||||
|
||||
|
||||
64
RELEASE.md
64
RELEASE.md
@@ -1,64 +0,0 @@
|
||||
# Релизы Tolfin
|
||||
|
||||
## Текущая версия: v1.0.1
|
||||
|
||||
**Важно:** Ссылка `@latest` всегда указывает на **последний релиз**, а не на последний коммит. Все изменения оформляются как релизы.
|
||||
|
||||
## Как создать новый релиз
|
||||
|
||||
### 1. Внесите изменения
|
||||
Сделайте все необходимые изменения в коде и отправьте их на GitHub:
|
||||
```powershell
|
||||
git add .
|
||||
git commit -m "Описание изменений"
|
||||
git push
|
||||
```
|
||||
|
||||
### 2. Создайте тег версии
|
||||
```powershell
|
||||
git tag -a v1.0.1 -m "Release v1.0.1 - Описание изменений"
|
||||
git push origin v1.0.1
|
||||
```
|
||||
|
||||
### 3. Обновите тег latest
|
||||
После создания релиза обновите тег `latest` чтобы он указывал на новый релиз:
|
||||
```powershell
|
||||
# Получите хеш нового релиза
|
||||
git rev-list -n 1 v1.0.1
|
||||
|
||||
# Обновите тег latest (замените ХЕШ на полученный хеш)
|
||||
git tag -f latest ХЕШ
|
||||
git push origin latest --force
|
||||
```
|
||||
|
||||
### 4. Создайте релиз на GitHub
|
||||
1. Зайдите на https://github.com/OlegTolchin/Tolfin/releases
|
||||
2. Нажмите "Draft a new release"
|
||||
3. Выберите созданный тег (например, v1.0.1)
|
||||
4. Заполните описание релиза
|
||||
5. Нажмите "Publish release"
|
||||
|
||||
## CDN URL
|
||||
|
||||
### Последняя версия (рекомендуется):
|
||||
```css
|
||||
@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/tolfin.css");
|
||||
```
|
||||
|
||||
### Конкретная версия:
|
||||
```css
|
||||
@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@v1.0.0/theme/tolfin.css");
|
||||
```
|
||||
|
||||
## История релизов
|
||||
|
||||
### v1.0.1 (Текущая)
|
||||
- Обновлена тема tolfin.css
|
||||
- Исправлена система релизов
|
||||
- Ссылка @latest теперь указывает на последний релиз
|
||||
|
||||
### v1.0.0
|
||||
- Первая официальная версия
|
||||
- Полная тема с баннером
|
||||
- Все модули включены
|
||||
- Удалена поддержка логотипов (только баннер)
|
||||
BIN
assets/logo.png
Normal file
BIN
assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 395 KiB |
@@ -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,99 +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");
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 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/tolfin.css");
|
||||
```
|
||||
|
||||
### Индивидуальные модули:
|
||||
```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");
|
||||
/* Добавляйте нужные модули */
|
||||
```
|
||||
@@ -1,10 +0,0 @@
|
||||
/*
|
||||
Этот модуль центрирует секцию "Мои медиа (small)" на главной странице.
|
||||
Полезно для более сбалансированного вида главной страницы.
|
||||
Может использоваться как отдельный модуль.
|
||||
*/
|
||||
|
||||
#indexPage .section0 .itemsContainer.padded-left.padded-right {
|
||||
justify-content: center !important;
|
||||
padding-top: 15px !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