From a49d90a98d4d6b0f7a1774999b3ee327759bd4fb Mon Sep 17 00:00:00 2001 From: Oleg Tolchin Date: Sun, 15 Feb 2026 19:25:13 +0300 Subject: [PATCH] Restructure project: add base theme and all modules like example --- README.md | 26 +- example/base.css | 792 ++++++++++++++++++++ example/complete.css | 16 + example/modules/README.md | 34 + example/modules/central-libraries-small.css | 10 + example/modules/change-logo.css | 14 + example/modules/count-indicators.css | 26 + example/modules/floating-progress.css | 45 ++ example/modules/forgot-password.css | 14 + example/modules/hide-my-media.css | 17 + example/modules/moving-cards.css | 13 + example/modules/smaller-cast.css | 82 ++ example/modules/static-sidebar.css | 34 + manifest.json | 2 +- theme/{darkvar.css => base.css} | 15 +- theme/complete.css | 21 + theme/modules/README.md | 109 +++ theme/modules/central-libraries-small.css | 10 + theme/{ => modules}/change-logo.css | 0 theme/modules/count-indicators.css | 26 + theme/modules/floating-progress.css | 45 ++ theme/modules/forgot-password.css | 14 + theme/modules/hide-my-media.css | 17 + theme/modules/moving-cards.css | 13 + theme/modules/smaller-cast.css | 77 ++ theme/modules/static-sidebar.css | 34 + 26 files changed, 1495 insertions(+), 11 deletions(-) create mode 100644 example/base.css create mode 100644 example/complete.css create mode 100644 example/modules/README.md create mode 100644 example/modules/central-libraries-small.css create mode 100644 example/modules/change-logo.css create mode 100644 example/modules/count-indicators.css create mode 100644 example/modules/floating-progress.css create mode 100644 example/modules/forgot-password.css create mode 100644 example/modules/hide-my-media.css create mode 100644 example/modules/moving-cards.css create mode 100644 example/modules/smaller-cast.css create mode 100644 example/modules/static-sidebar.css rename theme/{darkvar.css => base.css} (98%) create mode 100644 theme/complete.css create mode 100644 theme/modules/README.md create mode 100644 theme/modules/central-libraries-small.css rename theme/{ => modules}/change-logo.css (100%) create mode 100644 theme/modules/count-indicators.css create mode 100644 theme/modules/floating-progress.css create mode 100644 theme/modules/forgot-password.css create mode 100644 theme/modules/hide-my-media.css create mode 100644 theme/modules/moving-cards.css create mode 100644 theme/modules/smaller-cast.css create mode 100644 theme/modules/static-sidebar.css diff --git a/README.md b/README.md index 90a86d7..b989916 100644 --- a/README.md +++ b/README.md @@ -9,17 +9,39 @@ 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/darkvar.css"); + @import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/complete.css"); ``` 3. Click Save ### Method 2: Manual -1. Download `theme/darkvar.css` from this repository +1. Download `theme/complete.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/example/base.css b/example/base.css new file mode 100644 index 0000000..1d6bab6 --- /dev/null +++ b/example/base.css @@ -0,0 +1,792 @@ +/* + Jamfin - Another Jellyfin Theme aimed to please the masses. + Please note that this theme is still in development and may not be fully functional. + This theme is based on the Jellyfin default theme. + This theme is licensed under the MIT License. +*/ + +:root { + /* Colours */ + --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; + + /* General Appearance */ + --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; /* cover the full element */ + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(180deg, transparent 5%, var(--theme-background-colour)); + pointer-events: none; /* ensures it's non-interactive */ + z-index: 1; /* sits on top of the image */ +} + +.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; +} diff --git a/example/complete.css b/example/complete.css new file mode 100644 index 0000000..63a2841 --- /dev/null +++ b/example/complete.css @@ -0,0 +1,16 @@ +/* + The complete pack of the Jamfin theme. This file includes all the modules and the main theme. + If you wish to use only some of the modules, you can import them individually. + You can grab the base theme by changing jamfin.css to base.css in the first line. +*/ + +@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/base.css"); +@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/static-sidebar.css"); +@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/central-libraries-small.css"); +@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/change-logo.css"); +@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/count-indicators.css"); +@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/forgot-password.css"); +@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/hide-my-media.css"); +@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/moving-cards.css"); +@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/smaller-cast.css"); +@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/floating-progress.css"); diff --git a/example/modules/README.md b/example/modules/README.md new file mode 100644 index 0000000..2acaafa --- /dev/null +++ b/example/modules/README.md @@ -0,0 +1,34 @@ +
+Logo + +## 🧩 Modules + +Here you can find our assortment of modules. These are included within the complete pack of the theme however can be used in conjunction with the base theme or any other theme of your choosing. + +## 🔌 Installation + +The general format to install a module is as followed, you will need to replace the `` with the file name of the module you wish to install. + +
+ +```css +@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/.css"); +``` + +
+ +#### ❓Where do I install it? + +Locate the `Custom CSS code` option under your General settings in the admin panel and simply paste one of the lines above within the box. + +If you wish to just install this for yourself only, you can do so by going to your users Display settings and copy the following settings. + +- [x] Disable server-provided custom CSS code + +Then enter the theme into the `Custom CSS code` option and save your settings. + +## 🖌️ Customisation + +Each module has it's own individual customisation parameters. Please read the respective README by going into each modules folder. + +
\ No newline at end of file diff --git a/example/modules/central-libraries-small.css b/example/modules/central-libraries-small.css new file mode 100644 index 0000000..6bf1878 --- /dev/null +++ b/example/modules/central-libraries-small.css @@ -0,0 +1,10 @@ +/* + This module will change "My Media (small)" to be centered on the homepage. + This is useful to make the homepage look more balanced. + This can be used as a standalone module. +*/ + +#indexPage .section0 .itemsContainer.padded-left.padded-right { + justify-content: center !important; + padding-top: 15px !important; +} diff --git a/example/modules/change-logo.css b/example/modules/change-logo.css new file mode 100644 index 0000000..3bdda66 --- /dev/null +++ b/example/modules/change-logo.css @@ -0,0 +1,14 @@ +/* + This module will change the Jellyfin logo to a custom one. + This allows you to white-label your Jellyfin instance slightly. + This can be used as a standalone module. +*/ + +:root { + --logo-url: url('https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/assets/banner.png'); +} + +.pageTitleWithDefaultLogo, +.spashLogo { + background-image: var(--logo-url) !important; +} diff --git a/example/modules/count-indicators.css b/example/modules/count-indicators.css new file mode 100644 index 0000000..910338a --- /dev/null +++ b/example/modules/count-indicators.css @@ -0,0 +1,26 @@ +/* + This module change the color of the count indicators. + This is a simple and effective way to make your Jellyfin instance look more modern. + This can be used as a standalone module. +*/ + +:root { + --show-count-indicators: flex; /* none to hide */ + --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); +} \ No newline at end of file diff --git a/example/modules/floating-progress.css b/example/modules/floating-progress.css new file mode 100644 index 0000000..2bd45b5 --- /dev/null +++ b/example/modules/floating-progress.css @@ -0,0 +1,45 @@ +/* + This module will make progress bars float from the bottom of the card. + This is useful if you wish to make the progress bar more visible. + This can be used as a standalone module. +*/ + +: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); +} \ No newline at end of file diff --git a/example/modules/forgot-password.css b/example/modules/forgot-password.css new file mode 100644 index 0000000..6a4fe24 --- /dev/null +++ b/example/modules/forgot-password.css @@ -0,0 +1,14 @@ +/* + This module will remove the "Forgot Password" button from the login page. + This is useful if you have a third-party user management system. + This can be used as a standalone module. +*/ + +#btnResetPassword, +.btnForgotPassword { + display: none !important; +} + +#loginPage { + max-height: 450px; +} \ No newline at end of file diff --git a/example/modules/hide-my-media.css b/example/modules/hide-my-media.css new file mode 100644 index 0000000..d468783 --- /dev/null +++ b/example/modules/hide-my-media.css @@ -0,0 +1,17 @@ +/* + This module will hide the "My Media" section from the Jellyfin homepage. + This is useful if you want an even more minimalistic homepage. + This can be used as a standalone module. +*/ + +#indexPage .section0 .sectionTitle { + display: none; +} + +#indexPage .section0 { + padding-top: 1em; +} + +#indexPage .verticalSection.section0 { + padding-top: 3em; +} \ No newline at end of file diff --git a/example/modules/moving-cards.css b/example/modules/moving-cards.css new file mode 100644 index 0000000..1548911 --- /dev/null +++ b/example/modules/moving-cards.css @@ -0,0 +1,13 @@ +/* + This module will make your Jellyfin cards lift up slightly when hovered over. + This is a simple and effective way to make your Jellyfin instance look more modern. + This can be used as a standalone module. +*/ + +.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); +} \ No newline at end of file diff --git a/example/modules/smaller-cast.css b/example/modules/smaller-cast.css new file mode 100644 index 0000000..44d7189 --- /dev/null +++ b/example/modules/smaller-cast.css @@ -0,0 +1,82 @@ +/* + This module will make the cast cards smaller when viewing content details. + This is useful if you want a more compact view of the cast. + This can be used as a standalone module. + Original Code: 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 .card.overflowPortraitCard.personCard.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; +} \ No newline at end of file diff --git a/example/modules/static-sidebar.css b/example/modules/static-sidebar.css new file mode 100644 index 0000000..3cbcd38 --- /dev/null +++ b/example/modules/static-sidebar.css @@ -0,0 +1,34 @@ +/* + This module will allow you to make the sidebar static, meaning it will not scroll with the rest of the page. + This is a simple and effective way to make your Jellyfin instance look more modern. + This can be used as a standalone module. +*/ + +.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; +} diff --git a/manifest.json b/manifest.json index 9e1cc70..2a586d9 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/darkvar.css", + "url": "https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/complete.css", "target": "jellyfin", "categories": ["theme", "css"] } diff --git a/theme/darkvar.css b/theme/base.css similarity index 98% rename from theme/darkvar.css rename to theme/base.css index 1f84f14..8ee6d05 100644 --- a/theme/darkvar.css +++ b/theme/base.css @@ -1,3 +1,10 @@ +/* + ======================================== + TOLFIN - Базовая тема для Jellyfin + ======================================== + Модернизированная тема с кастомными шрифтами, + плавными анимациями и адаптивным дизайном. +*/ /* ======================================== ПЕРЕМЕННЫЕ ТЕМЫ @@ -912,11 +919,3 @@ progress { .chapterThumbText { width: fit-content; } - -/* ======================================== - МОДУЛИ ТЕМЫ - ======================================== */ - -/* Импорт модуля для замены логотипа */ -@import url("https://cdn.jsdelivr.net/gh/OlegTolchin/Tolfin@latest/theme/change-logo.css"); - diff --git a/theme/complete.css b/theme/complete.css new file mode 100644 index 0000000..19fb677 --- /dev/null +++ b/theme/complete.css @@ -0,0 +1,21 @@ +/* + ======================================== + 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/modules/README.md b/theme/modules/README.md new file mode 100644 index 0000000..ce09780 --- /dev/null +++ b/theme/modules/README.md @@ -0,0 +1,109 @@ +# 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"); +``` diff --git a/theme/modules/central-libraries-small.css b/theme/modules/central-libraries-small.css new file mode 100644 index 0000000..86c407f --- /dev/null +++ b/theme/modules/central-libraries-small.css @@ -0,0 +1,10 @@ +/* + Этот модуль центрирует секцию "Мои медиа (small)" на главной странице. + Полезно для более сбалансированного вида главной страницы. + Может использоваться как отдельный модуль. +*/ + +#indexPage .section0 .itemsContainer.padded-left.padded-right { + justify-content: center !important; + padding-top: 15px !important; +} diff --git a/theme/change-logo.css b/theme/modules/change-logo.css similarity index 100% rename from theme/change-logo.css rename to theme/modules/change-logo.css diff --git a/theme/modules/count-indicators.css b/theme/modules/count-indicators.css new file mode 100644 index 0000000..450fef8 --- /dev/null +++ b/theme/modules/count-indicators.css @@ -0,0 +1,26 @@ +/* + Этот модуль изменяет цвет индикаторов счётчиков. + Простой способ сделать 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); +} diff --git a/theme/modules/floating-progress.css b/theme/modules/floating-progress.css new file mode 100644 index 0000000..20a61a3 --- /dev/null +++ b/theme/modules/floating-progress.css @@ -0,0 +1,45 @@ +/* + Этот модуль делает прогресс-бары плавающими от низа карточки. + Полезно для большей видимости прогресс-бара. + Может использоваться как отдельный модуль. +*/ + +: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); +} diff --git a/theme/modules/forgot-password.css b/theme/modules/forgot-password.css new file mode 100644 index 0000000..cf73954 --- /dev/null +++ b/theme/modules/forgot-password.css @@ -0,0 +1,14 @@ +/* + Этот модуль убирает кнопку "Забыли пароль" со страницы входа. + Полезно если используется сторонняя система управления пользователями. + Может использоваться как отдельный модуль. +*/ + +#btnResetPassword, +.btnForgotPassword { + display: none !important; +} + +#loginPage { + max-height: 450px; +} diff --git a/theme/modules/hide-my-media.css b/theme/modules/hide-my-media.css new file mode 100644 index 0000000..df40bcb --- /dev/null +++ b/theme/modules/hide-my-media.css @@ -0,0 +1,17 @@ +/* + Этот модуль скрывает секцию "Мои медиа" с главной страницы Jellyfin. + Полезно для более минималистичного вида главной страницы. + Может использоваться как отдельный модуль. +*/ + +#indexPage .section0 .sectionTitle { + display: none; +} + +#indexPage .section0 { + padding-top: 1em; +} + +#indexPage .verticalSection.section0 { + padding-top: 3em; +} diff --git a/theme/modules/moving-cards.css b/theme/modules/moving-cards.css new file mode 100644 index 0000000..9dcb45f --- /dev/null +++ b/theme/modules/moving-cards.css @@ -0,0 +1,13 @@ +/* + Этот модуль делает карточки 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); +} diff --git a/theme/modules/smaller-cast.css b/theme/modules/smaller-cast.css new file mode 100644 index 0000000..a570e0f --- /dev/null +++ b/theme/modules/smaller-cast.css @@ -0,0 +1,77 @@ +/* + Этот модуль делает карточки актёров меньше при просмотре деталей контента. + Полезно для более компактного отображения актёрского состава. + Может использоваться как отдельный модуль. + Оригинальный код: 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; +} diff --git a/theme/modules/static-sidebar.css b/theme/modules/static-sidebar.css new file mode 100644 index 0000000..627ba1a --- /dev/null +++ b/theme/modules/static-sidebar.css @@ -0,0 +1,34 @@ +/* + Этот модуль делает боковую панель статичной (не прокручивается вместе со страницей). + Простой способ сделать 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; +}