Compare commits
97 Commits
main
...
824c0a42b2
| Author | SHA1 | Date | |
|---|---|---|---|
| 824c0a42b2 | |||
| 2b4dd620f9 | |||
| 8ef2feb520 | |||
| c57296fb83 | |||
| 57cd92b816 | |||
| b3dbf95e03 | |||
| b9f2d8d162 | |||
| 6a10a34880 | |||
| aa04a7601d | |||
| fac74be314 | |||
| d026f13a9b | |||
| 9ef5326086 | |||
| 3f3ef3e910 | |||
| f6b56af7b0 | |||
| d5a720f12d | |||
| 60e98066ab | |||
| 3446f195db | |||
| 08704c846e | |||
| 29c5f61e17 | |||
| c1b2a09b8e | |||
| 850bd26b82 | |||
| e39f5be270 | |||
| 6844209543 | |||
| 85544d04e6 | |||
| bae8faf7db | |||
| a4475105ca | |||
| eada915cf1 | |||
| 852cf73a4d | |||
| b6731570e7 | |||
| 39cddd6099 | |||
| 3f6f13f087 | |||
| d1a7851b12 | |||
| 08c5bb41cc | |||
| fb996bd2f7 | |||
| 13cef01d82 | |||
| 1be010e40f | |||
| ce2d5eec7c | |||
| a8bd4ec377 | |||
| 5ce9626c70 | |||
| bf5b48b109 | |||
| db01cc2ec7 | |||
| 7ff6cf4786 | |||
| 719f0b695f | |||
| eead9d3fca | |||
| 3096db30d6 | |||
| 48776aaaa4 | |||
| 602c3c3339 | |||
| f53ca8b58f | |||
| 2565154e44 | |||
| 6afa930d25 | |||
| b34ecc50c3 | |||
| dbb184119e | |||
| 8bcb488c18 | |||
| 8569fc244a | |||
| 52eaf4e013 | |||
| 8283e8ab73 | |||
| 157100a74e | |||
| 2a8aa1af9d | |||
| cceec2fe48 | |||
| e22067b3f7 | |||
| fb6c75293a | |||
| 22a4826d80 | |||
| a4993ec5fc | |||
| 2825193bee | |||
| 4f6a25a51e | |||
| ced99ab585 | |||
| 5c1aebaea6 | |||
| 2ca25f1769 | |||
| 1be6759083 | |||
| ce15a10316 | |||
| 4f9a659052 | |||
| 2895a448c7 | |||
| a4fd32e205 | |||
| 61f50473c0 | |||
| c2b8aa8c7a | |||
| 138a0feda8 | |||
| da4da00107 | |||
| 23cc637d8f | |||
| da41d7bee2 | |||
| fc87cf0994 | |||
| 1cc48177c7 | |||
| 47c001dc5a | |||
| 53efd91164 | |||
| 65141fe120 | |||
| 2230255f4c | |||
| 844a5c04fa | |||
| 3281fb46d6 | |||
| 001209ef7d | |||
| ca123d0ed0 | |||
| f4aeda73ee | |||
| 42c4783989 | |||
| 9ca2bc0946 | |||
| 5f31d7c131 | |||
| a9f320e857 | |||
| 55049cb91f | |||
| 26690e37ac | |||
| 4ae5d715b0 |
1225
.github/tolfin.css
vendored
Normal file
1225
.github/tolfin.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
@@ -13,13 +13,13 @@ This project uses Gitea API for loading CSS files to bypass browser ORB restrict
|
||||
1. Go to Jellyfin Dashboard → General → Custom CSS
|
||||
2. Paste this code:
|
||||
```css
|
||||
@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/complete.css");
|
||||
@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/union/tolfin.css");
|
||||
```
|
||||
3. Click Save
|
||||
|
||||
### Manual Installation
|
||||
|
||||
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
|
||||
|
||||
BIN
assets/logo.PNG
Normal file
BIN
assets/logo.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
BIN
assets/logo.png
BIN
assets/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 395 KiB |
796
theme/base.css
796
theme/base.css
@@ -1,796 +0,0 @@
|
||||
/*
|
||||
========================================
|
||||
TOLFIN - Базовая тема для Jellyfin
|
||||
========================================
|
||||
Модернизированная тема с кастомными шрифтами,
|
||||
плавными анимациями и адаптивным дизайном.
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
ПЕРЕМЕННЫЕ ТЕМЫ
|
||||
======================================== */
|
||||
:root {
|
||||
/* Цветовая палитра */
|
||||
--theme-background-colour: #101010;
|
||||
--theme-sidebar-background-colour: #222222;
|
||||
--theme-menu-background-colour: #3a3a3a80;
|
||||
--theme-menu-shadow-colour: #fff3;
|
||||
--theme-base-colour: #696969;
|
||||
--theme-text-colour: #dbdbdb;
|
||||
--theme-restart-colour: #da87287e;
|
||||
--theme-shutdown-colour: #c21c1c9d;
|
||||
--theme-progress-bar-colour: #cfcfcf;
|
||||
--theme-progress-bar-background-colour: #2c2c2c;
|
||||
--theme-progress-bar-transcoding-colour: #eb7e25;
|
||||
--theme-chapter-marker-colour: #dbdbdb;
|
||||
--theme-chapter-marker-watched-colour: #4a4a4a;
|
||||
|
||||
/* Общие параметры внешнего вида */
|
||||
--theme-roundness: .75rem;
|
||||
--theme-blur: 16px;
|
||||
}
|
||||
|
||||
/* Remove the Default Focus Outline */
|
||||
*:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Change Background Colours */
|
||||
.backgroundContainer,
|
||||
.mainDrawer,
|
||||
.drawer-open,
|
||||
.nowPlayingPlaylist,
|
||||
.nowPlayingContextMenu,
|
||||
html {
|
||||
background-color: var(--theme-background-colour);
|
||||
}
|
||||
|
||||
/* Re-design the Header */
|
||||
|
||||
.layout-desktop [dir="ltr"] .pageTitle {
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
|
||||
[dir="ltr"] .sidebarHeader {
|
||||
padding-left: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
[dir="ltr"] .navMenuOption {
|
||||
padding: .9em 1.2em !important;
|
||||
}
|
||||
|
||||
.pageTitleWithLogo {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.skinHeader {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layout-desktop .headerLeft,
|
||||
.layout-desktop .headerRight {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.layout-mobile .headerRight {
|
||||
margin: 0 .29em;
|
||||
}
|
||||
|
||||
.layout-mobile .libraryPage:not(.noSecondaryNavPage) {
|
||||
padding-top: 8.5em !important;
|
||||
}
|
||||
|
||||
.paper-icon-button-light > div {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.skinHeader.semiTransparent {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.headerTabs,
|
||||
.headerRight,
|
||||
.dialog,
|
||||
.raised,
|
||||
.fab,
|
||||
.paper-icon-button-light:not(
|
||||
.headerRight,
|
||||
.headerRight .paper-icon-button-light
|
||||
),
|
||||
.osdHeader .headerLeft .paper-icon-button-light,
|
||||
.detailButton,
|
||||
.sliderBubble,
|
||||
.MuiDataGrid-root,
|
||||
.MuiMenu-list,
|
||||
.MuiButton-root,
|
||||
.toast.toastVisible,
|
||||
.guide-date-tab-button.emby-tab-button-active,
|
||||
.guide-date-tab-button:focus,
|
||||
.MuiTabs-centered .MuiTab-root,
|
||||
#skipIntro .emby-button,
|
||||
.chapterThumbContainer,
|
||||
.chapterThumbTextContainer {
|
||||
color: var(--theme-text-colour);
|
||||
border-radius: var(--theme-roundness);
|
||||
box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||||
background-color: var(--theme-menu-background-colour);
|
||||
backdrop-filter: blur(var(--theme-blur)) !important;
|
||||
-webkit-backdrop-filter: blur(var(--theme-blur)) !important;
|
||||
-moz-backdrop-filter: blur(var(--theme-blur)) !important;
|
||||
-o-backdrop-filter: blur(var(--theme-blur)) !important;
|
||||
-ms-backdrop-filter: blur(var(--theme-blur)) !important;
|
||||
}
|
||||
|
||||
.dialogBackdrop {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.headerTabs .emby-tabs-slider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headerTabs .emby-tab-button,
|
||||
.headerRight .paper-icon-button-light,
|
||||
.detailButton,
|
||||
.sessionCardButton,
|
||||
.guideOptions,
|
||||
.MuiTabs-centered .MuiTab-root {
|
||||
padding: .556em !important;
|
||||
margin: 0 .29em !important;
|
||||
border-radius: var(--theme-roundness);
|
||||
}
|
||||
|
||||
.layout-desktop .headerTabs,
|
||||
.layout-desktop .headerLeft,
|
||||
.layout-desktop .headerRight,
|
||||
.layout-desktop .emby-tabs-slider,
|
||||
.layout-desktop .raised {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.layout-mobile .headerTabs,
|
||||
.layout-mobile .headerRight,
|
||||
.layout-mobile .emby-tabs-slider,
|
||||
.layout-mobile .raised {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.layout-desktop .headerTabs {
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
@media (max-width: 1599px) {
|
||||
.layout-desktop .sectionTabs {
|
||||
width: auto;
|
||||
align-self: center;
|
||||
margin-top: -58px;
|
||||
}
|
||||
|
||||
.layout-desktop .headerRight {
|
||||
margin-right: .8em;
|
||||
}
|
||||
|
||||
.layout-mobile .headerTabs {
|
||||
margin: 20px auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.layout-mobile .pageTitleWithLogo {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-tv .sectionTabs {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
@media (min-width: 100em) {
|
||||
.layout-tv .headerTabs {
|
||||
margin-top: unset;
|
||||
}
|
||||
|
||||
.layout-mobile .headerTabs {
|
||||
margin-top: -1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 100em) {
|
||||
.layout-tv .sectionTabs {
|
||||
width: fit-content;
|
||||
align-self: center;
|
||||
font-size: 125%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 50em) {
|
||||
.homeLibraryButton {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Drawer */
|
||||
|
||||
.layout-desktop,
|
||||
.touch-menu-la.transition {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.layout-mobile .mainDrawer {
|
||||
padding-top: 1.2em;
|
||||
}
|
||||
|
||||
.layout-desktop .mainDrawer-scrollContainer {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.navMenuOption,
|
||||
.navMenuOption-selected,
|
||||
.navMenuOption:hover,
|
||||
.MuiListItem-root,
|
||||
.MuiDrawer-paperAnchorLeft .MuiButtonBase-root {
|
||||
border-radius: var(--theme-roundness) !important;
|
||||
width: 80%;
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.navMenuOption:hover,
|
||||
.listItem:hover,
|
||||
.MuiButton-root:hover {
|
||||
background-color: var(--theme-menu-shadow-colour);
|
||||
}
|
||||
|
||||
.navMenuOption-selected,
|
||||
.Mui-selected {
|
||||
background: var(--theme-menu-shadow-colour) !important;
|
||||
}
|
||||
|
||||
/* Main Cards */
|
||||
|
||||
.section0 .sectionTitle {
|
||||
padding-top: 1em !important;
|
||||
}
|
||||
|
||||
.layout-desktop .section0 .emby-scrollbuttons,
|
||||
.layout-desktop .section1 .emby-scrollbuttons {
|
||||
padding-top: unset;
|
||||
}
|
||||
|
||||
.cardContent:not(.dashboardSection .cardContent),
|
||||
.cardPadder:not(.dashboardSection .cardPadder),
|
||||
.blurhash-canvas,
|
||||
.dialog,
|
||||
.itemSelectionPanel {
|
||||
border-radius: var(--theme-roundness) !important;
|
||||
box-shadow: inset 0 1px var(--theme-menu-shadow-colour) !important;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.cardOverlayContainer {
|
||||
border-radius: var(--theme-roundness) !important;
|
||||
box-shadow: inset 0 2px var(--theme-menu-shadow-colour) !important;
|
||||
transition: unset;
|
||||
}
|
||||
|
||||
.layout-mobile .cardOverlayButton {
|
||||
padding: unset;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.layout-mobile .cardOverlayButtonIcon {
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
.layout-desktop .cardOverlayContainer > .cardOverlayButton-br .cardOverlayButton {
|
||||
padding: unset;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.defaultCardBackground1,
|
||||
.defaultCardBackground2,
|
||||
.defaultCardBackground3,
|
||||
.defaultCardBackground4,
|
||||
.defaultCardBackground5,
|
||||
.cardOverlayContainer > .cardOverlayFab-primary {
|
||||
background-color: var(--theme-menu-background-colour);
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
.button-submit:focus,
|
||||
.paper-icon-button-light:hover:not(:disabled, .btnDelete),
|
||||
.raised:hover,
|
||||
.emby-tab-button:hover,
|
||||
.detailButton:hover,
|
||||
.emby-tab-button.show-focus:focus,
|
||||
.paper-icon-button-light.show-focus:focus,
|
||||
.emby-button.show-focus:focus,
|
||||
.alphaPickerButton-tv:focus,
|
||||
#skipIntro .emby-button:hover,
|
||||
.multiSelectCheckboxOutline {
|
||||
border-radius: var(--theme-roundness) !important;
|
||||
transform: unset !important;
|
||||
-webkit-transform: unset !important;
|
||||
-moz-transform: unset !important;
|
||||
-o-transform: unset !important;
|
||||
-ms-transform: unset !important;
|
||||
color: var(--theme-text-colour);
|
||||
background-color: var(--theme-menu-shadow-colour) !important;
|
||||
}
|
||||
|
||||
.layout-tv .itemDetailsGroup .emby-button.show-focus:focus {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
/* User Settings */
|
||||
|
||||
.readOnlyContent h2,
|
||||
.sectionTitle,
|
||||
.dashboardSection h3,
|
||||
.MuiListSubheader-root {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.listItem-border,
|
||||
.itemSelectionPanel {
|
||||
border: unset;
|
||||
}
|
||||
|
||||
.listItem {
|
||||
padding-left: 1.2em !important;
|
||||
}
|
||||
|
||||
.listItem:hover,
|
||||
.MuiButtonBase-root,
|
||||
.MuiButtonBase-root:hover,
|
||||
.emby-tab-button,
|
||||
progress {
|
||||
border-radius: var(--theme-roundness);
|
||||
}
|
||||
|
||||
.collapseContent,
|
||||
.formDialogFooter:not(.formDialogFooter-clear),
|
||||
.formDialogHeader:not(.formDialogHeader-clear),
|
||||
.paperList,
|
||||
.visualCardBox,
|
||||
.emby-select-withcolor,
|
||||
.emby-input,
|
||||
.emby-textarea {
|
||||
background-color: var(--theme-menu-background-colour);
|
||||
border-radius: var(--theme-roundness);
|
||||
box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||||
border: unset;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.emby-select[disabled] {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
.trackSelections .selectContainer .detailTrackSelect {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* Content Details */
|
||||
|
||||
.layout-desktop .detailImageContainer .card {
|
||||
width: 250px;
|
||||
max-width: unset;
|
||||
top: 1.5em;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Backwards Compatibility for versions before 10.11.0 */
|
||||
.layout-desktop .infoWrapper .detailImageContainer .card {
|
||||
padding-top: 8.5em;
|
||||
}
|
||||
|
||||
.layout-desktop .detailPagePrimaryContent {
|
||||
padding-top: 135px;
|
||||
padding-left: 300px;
|
||||
min-height: 325px;
|
||||
}
|
||||
|
||||
.layout-desktop .mainDetailButtons {
|
||||
margin-top: 350px;
|
||||
margin-left: 292px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.layout-mobile .mainDetailButtons {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mainDetailButtons .detailButton {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-left: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btnPlay .detailButton-content:before {
|
||||
content: "Play";
|
||||
}
|
||||
|
||||
.btnReplay .detailButton-content:before {
|
||||
content: "Replay";
|
||||
}
|
||||
|
||||
.btnDownload .detailButton-content:before {
|
||||
content: "Download";
|
||||
}
|
||||
|
||||
.btnPlayTrailer .detailButton-content:before {
|
||||
content: "Trailer";
|
||||
}
|
||||
|
||||
.btnInstantMix .detailButton-content:before {
|
||||
content: "Instant Mix";
|
||||
}
|
||||
|
||||
.btnShuffle .detailButton-content:before {
|
||||
content: "Shuffle";
|
||||
}
|
||||
|
||||
.btnCancelSeriesTimer .detailButton-content:before {
|
||||
content: "Cancel Programme";
|
||||
}
|
||||
|
||||
.btnCancelTimer .detailButton-content:before {
|
||||
content: "Stop Recording";
|
||||
}
|
||||
|
||||
.btnPlaystate .detailButton-content:before {
|
||||
content: "Watched";
|
||||
}
|
||||
|
||||
.btnUserRating .detailButton-content:before {
|
||||
content: "Favourite";
|
||||
}
|
||||
|
||||
.btnSplitVersions .detailButton-content:before {
|
||||
content: "Split Versions";
|
||||
}
|
||||
|
||||
.btnMoreCommands .detailButton-content:before {
|
||||
content: "Options";
|
||||
}
|
||||
|
||||
.detailButton-content:before {
|
||||
position: relative;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.detailButton-icon:before {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.mainDetailButtons .material-icons {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.layout-desktop .detailPagePrimaryContainer,
|
||||
.layout-desktop .detailPageContent {
|
||||
padding-left: 3.3% !important;
|
||||
}
|
||||
|
||||
.detailRibbon {
|
||||
background: unset;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.layout-desktop .infoWrapper {
|
||||
padding-top: 226px;
|
||||
padding-left: 300px;
|
||||
}
|
||||
|
||||
.itemBackdrop::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, transparent 5%, var(--theme-background-colour));
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.layout-mobile .itemBackdrop {
|
||||
margin-top: unset;
|
||||
-webkit-animation: backdrop-fadein .8s ease-in normal both;
|
||||
animation: backdrop-fadein .8s ease-in normal both;
|
||||
}
|
||||
|
||||
.layout-mobile .detailImageContainer .card {
|
||||
filter: unset;
|
||||
-webkit-filter: unset;
|
||||
-moz-filter: unset;
|
||||
-o-filter: unset;
|
||||
-ms-filter: unset;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.layout-desktop .detailLogo {
|
||||
left: 3%;
|
||||
right: unset;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.layout-desktop .backgroundContainer.withBackdrop,
|
||||
.MuiPaper-root,
|
||||
.MuiTabs-indicator {
|
||||
background-color: unset;
|
||||
background-image: unset;
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
.layout-desktop .backdropImage {
|
||||
filter: blur(5px);
|
||||
-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
-o-filter: blur(5px);
|
||||
-ms-filter: blur(5px);
|
||||
}
|
||||
|
||||
.darkenContent {
|
||||
backdrop-filter: blur(5px) brightness(0.75);
|
||||
-webkit-backdrop-filter: blur(5px) brightness(0.75);
|
||||
-moz-backdrop-filter: blur(5px) brightness(0.75);
|
||||
-o-backdrop-filter: blur(5px) brightness(0.75);
|
||||
-ms-backdrop-filter: blur(5px) brightness(0.75);
|
||||
background: -webkit-linear-gradient(180deg, transparent, var(--theme-background-colour));
|
||||
background: -moz-linear-gradient(180deg, transparent, var(--theme-background-colour));
|
||||
background: -o-linear-gradient(180deg, transparent, var(--theme-background-colour));
|
||||
background: -ms-linear-gradient(180deg, transparent, var(--theme-background-colour));
|
||||
background: linear-gradient(180deg, transparent, var(--theme-background-colour));
|
||||
}
|
||||
|
||||
.itemsContainer-tv {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Admin Settings */
|
||||
|
||||
#btnRestartServer {
|
||||
box-shadow: inset 0 1px var(--theme-restart-colour) !important;
|
||||
}
|
||||
|
||||
#btnRestartServer:hover,
|
||||
.notifications,
|
||||
.MuiChip-filledInfo {
|
||||
color: var(--theme-text-colour) !important;
|
||||
background-color: var(--theme-restart-colour) !important;
|
||||
}
|
||||
|
||||
#btnShutdown,
|
||||
.btnDelete {
|
||||
box-shadow: inset 0 1px var(--theme-shutdown-colour) !important;
|
||||
}
|
||||
|
||||
#btnShutdown:hover,
|
||||
.btnDelete:hover,
|
||||
.notification_important,
|
||||
.MuiChip-filledError {
|
||||
color: var(--theme-text-colour) !important;
|
||||
background-color: var(--theme-shutdown-colour) !important;
|
||||
}
|
||||
|
||||
.listItemIcon:not(.listItemIcon-transparent) {
|
||||
border-radius: var(--theme-roundness);
|
||||
}
|
||||
|
||||
.sessionCardButtons {
|
||||
margin: .29em 0;
|
||||
}
|
||||
|
||||
.dashboardSection .cardContent {
|
||||
border-top-left-radius: var(--theme-roundness);
|
||||
border-top-right-radius: var(--theme-roundness);
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a[data-role="button"]:first-child {
|
||||
border-bottom-left-radius: var(--theme-roundness);
|
||||
border-top-left-radius: var(--theme-roundness);
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a[data-role="button"]:last-child {
|
||||
border-bottom-right-radius: var(--theme-roundness);
|
||||
border-top-right-radius: var(--theme-roundness);
|
||||
}
|
||||
|
||||
.dashboardColumn {
|
||||
flex-shrink: inherit;
|
||||
}
|
||||
|
||||
/* Base Colours */
|
||||
|
||||
.selectLabelFocused,
|
||||
.textareaLabelFocused,
|
||||
.inputLabelFocused,
|
||||
.mdl-slider,
|
||||
.metadataSidebarIcon,
|
||||
.button-link,
|
||||
.guide-date-tab-button.emby-tab-button-active,
|
||||
.guide-date-tab-button:focus,
|
||||
#divRunningTasks span,
|
||||
.MuiAlert-icon,
|
||||
.listItemBodyText span {
|
||||
color: var(--theme-text-colour) !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked + span + .checkboxOutline,
|
||||
.listItemIcon:not(
|
||||
.listItemIcon-transparent,
|
||||
.notification_important,
|
||||
.notifications
|
||||
),
|
||||
.guide-channelHeaderCell:focus,
|
||||
.programCell:focus,
|
||||
.emby-button.show-focus:focus,
|
||||
::selection,
|
||||
div[data-role="controlgroup"] a.ui-btn-active,
|
||||
.MuiAvatar-root,
|
||||
.selectionCommandsPanel {
|
||||
background-color: var(--theme-base-colour) !important;
|
||||
}
|
||||
|
||||
.emby-checkbox + span + .checkboxOutline,
|
||||
.emby-checkbox:checked + span + .checkboxOutline,
|
||||
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline,
|
||||
.mdl-spinner__layer-1,
|
||||
.mdl-spinner__layer-2,
|
||||
.mdl-spinner__layer-3,
|
||||
.mdl-spinner__layer-4 {
|
||||
border-color: var(--theme-base-colour) !important;
|
||||
}
|
||||
|
||||
.mdl-slider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mdl-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-range-thumb {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-thumb {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mdl-slider-background-flex,
|
||||
.mdl-slider-background-lower,
|
||||
.mdl-slider-background-upper {
|
||||
border-radius: var(--theme-roundness);
|
||||
box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
/* Chapter Markers */
|
||||
.sliderMarkerContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sliderMarker {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
background-color: var(--theme-chapter-marker-colour);
|
||||
opacity: 0.6;
|
||||
border-radius: 1px;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease, width 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.sliderMarker.unwatched {
|
||||
background-color: var(--theme-chapter-marker-colour);
|
||||
}
|
||||
|
||||
.sliderMarker.watched {
|
||||
background-color: var(--theme-chapter-marker-watched-colour);
|
||||
}
|
||||
|
||||
.mdl-slider-background-upper {
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.mdl-slider-background-flex-container {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.innerCardFooter .itemProgressBarForeground,
|
||||
.playbackProgress > div,
|
||||
.mdl-slider-background-lower,
|
||||
.iconOsdProgressInner,
|
||||
.taskProgressInner,
|
||||
progress {
|
||||
background-color: var(--theme-progress-bar-colour) !important;
|
||||
}
|
||||
|
||||
/* These need to remain separate for browser compatibility */
|
||||
progress::-moz-progress-bar {
|
||||
background-color: var(--theme-progress-bar-colour);
|
||||
}
|
||||
progress::-webkit-progress-bar {
|
||||
background-color: var(--theme-progress-bar-colour);
|
||||
}
|
||||
progress::-ms-thumb {
|
||||
background-color: var(--theme-progress-bar-colour);
|
||||
}
|
||||
|
||||
.transcodingProgress > div {
|
||||
background-color: var(--theme-progress-bar-transcoding-colour) !important;
|
||||
}
|
||||
|
||||
.innerCardFooter .itemProgressBar,
|
||||
.backgroundProgress > div,
|
||||
.mdl-slider-background-flex,
|
||||
.taskProgressOuter,
|
||||
progress {
|
||||
background-color: var(--theme-progress-bar-background-colour) !important;
|
||||
}
|
||||
|
||||
.layout-desktop .dashboardDocument .content-primary:not(.layout-desktop #dashboardPage .content-primary) {
|
||||
padding-left: 2.5em;
|
||||
padding-right: 2.5em;
|
||||
}
|
||||
|
||||
[dir="ltr"] .formDialogHeaderTitle:first-child {
|
||||
margin-left: unset;
|
||||
}
|
||||
|
||||
/* Login Form */
|
||||
|
||||
#loginPage {
|
||||
background-color: var(--theme-menu-background-colour);
|
||||
border-radius: var(--theme-roundness);
|
||||
box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
|
||||
padding: unset !important;
|
||||
max-width: 750px;
|
||||
max-height: 500px;
|
||||
margin: 150px auto 0;
|
||||
}
|
||||
|
||||
.manualLoginForm .raised.button-submit.block.emby-button {
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
.chapterThumbTextContainer {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.chapterThumbText {
|
||||
width: fit-content;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
/*
|
||||
========================================
|
||||
TOLFIN - Полная тема для Jellyfin
|
||||
========================================
|
||||
Полная тема включающая все модули.
|
||||
Импортирует базовую тему и все модули.
|
||||
*/
|
||||
|
||||
|
||||
@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/base.css");
|
||||
@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/static-sidebar.css");
|
||||
@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/central-libraries-small.css");
|
||||
@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/change-banner.css");
|
||||
@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/count-indicators.css");
|
||||
@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/forgot-password.css");
|
||||
@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/hide-my-media.css");
|
||||
@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/moving-cards.css");
|
||||
@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/smaller-cast.css");
|
||||
@import url("https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/theme/modules/floating-progress.css");
|
||||
@@ -1,10 +0,0 @@
|
||||
/*
|
||||
Этот модуль центрирует секцию "Мои медиа (small)" на главной странице.
|
||||
Полезно для более сбалансированного вида главной страницы.
|
||||
Может использоваться как отдельный модуль.
|
||||
*/
|
||||
|
||||
#indexPage .section0 .itemsContainer.padded-left.padded-right {
|
||||
justify-content: center !important;
|
||||
padding-top: 15px !important;
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
/*
|
||||
This module will change the Jellyfin banner to a custom one.
|
||||
This allows you to customise the background on the homepage.
|
||||
This can be used as a standalone module.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--banner-url: url('https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/assets/banner.png');
|
||||
--logo-url: url('https://git.tolchin.pro/Oleg/Tolfin/raw/branch/main/assets/logo.png');
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: var(--banner-url) !important;
|
||||
}
|
||||
|
||||
.splashLogo {
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user