Restructure project: add base theme and all modules like example
This commit is contained in:
34
example/modules/README.md
Normal file
34
example/modules/README.md
Normal file
@@ -0,0 +1,34 @@
|
||||
<div align="center">
|
||||
<img src="https://github.com/JamsRepos/Jamfin/blob/main/assets/logo.png?raw=true" alt="Logo" width="125"/>
|
||||
|
||||
## 🧩 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 `<name>` with the file name of the module you wish to install.
|
||||
|
||||
<div align="left">
|
||||
|
||||
```css
|
||||
@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/<name>.css");
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
#### ❓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.
|
||||
|
||||
</div>
|
||||
10
example/modules/central-libraries-small.css
Normal file
10
example/modules/central-libraries-small.css
Normal file
@@ -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;
|
||||
}
|
||||
14
example/modules/change-logo.css
Normal file
14
example/modules/change-logo.css
Normal file
@@ -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;
|
||||
}
|
||||
26
example/modules/count-indicators.css
Normal file
26
example/modules/count-indicators.css
Normal file
@@ -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);
|
||||
}
|
||||
45
example/modules/floating-progress.css
Normal file
45
example/modules/floating-progress.css
Normal file
@@ -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);
|
||||
}
|
||||
14
example/modules/forgot-password.css
Normal file
14
example/modules/forgot-password.css
Normal file
@@ -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;
|
||||
}
|
||||
17
example/modules/hide-my-media.css
Normal file
17
example/modules/hide-my-media.css
Normal file
@@ -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;
|
||||
}
|
||||
13
example/modules/moving-cards.css
Normal file
13
example/modules/moving-cards.css
Normal file
@@ -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);
|
||||
}
|
||||
82
example/modules/smaller-cast.css
Normal file
82
example/modules/smaller-cast.css
Normal file
@@ -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;
|
||||
}
|
||||
34
example/modules/static-sidebar.css
Normal file
34
example/modules/static-sidebar.css
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user