BreizhHardware/jellyfin-plugin-skin-manager
1
0
Fork 0
mirror of https://github.com/danieladov/jellyfin-plugin-skin-manager.git synced 2026-01-18 16:37:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/danieladov/jellyfin-plugin-skin-manager

Browse Source
This commit is contained in:
Mister Rajoy
2021-02-04 17:54:33 +01:00
parent 4a57c46888 2e7c07e820
commit 69da666ceb
4 changed files with 75 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
View File

@@ -905,7 +905,7 @@
.font-select {
font-size: 16px;
width: 240px;
width: 100%;
position: relative;
display: inline-block;
border-color: red;
@@ -938,13 +938,12 @@
line-height: 32px;
padding: 3px 8px 3px 8px;
color: #fff;
background: #292929
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
no-repeat right 0.75rem center/8px 10px;
background: #292929 url(https://cosycorner.co.nz/wp-content/uploads/revslider/slider-1/white-down-arrow-png-2.png) no-repeat right 0.75em center/8px 9px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-size: 1.15em;
}
.font-select-active > span {

81
skins-3.0.json
View File

@@ -257,22 +257,6 @@
"step": "0.1",
"css": "h1 {font-size: $em;}",
"default": "1.8"
},
{
"type": "colorPicker",
"mode": "rgba",
"name": "Accent color",
"description": "Choose a custom accent color to use with the theme.",
"css": ".countIndicator {background: rgba($,0.8);}.playedIndicator, .innerCardFooter /*Accenting*/.button-flat:hover {background: rgba($,0.25);}.paper-icon-button-light:hover { background-color: rgba($,0.25) !important;}.subtitleappearance-preview { background: linear-gradient(140deg,rgba($),#111) !important;}.navMenuOption-selected, .selectionCommandsPanel { background: rgba($, 0.8) !important;}.raised,.fab,a[data-role='button'] { background: rgba($, 0.8) !important;transition: all 0.2s !important;} /*Glow accent*/ .raised.homeLibraryButton {box-shadow: 0px 0px 5px rgba($, 0) !important; border: solid 1px rgba($,0) !important;}.cardOverlayContainer:hover,.dialog,..raised.homeLibraryButton:hover { box-shadow: 0px 0px 5px rgb($) !important; border: solid 1px rgba($,0.6) !important;}.cardOverlayContainer { border: solid 1px rgba($,0.0) !important;}",
"default": "#303030"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "SideBar Text Color",
"description": "Modifies the color of the left menu panel.",
"css": ".mainDrawer-scrollContainer { color: $; }",
"default": "#ffffff"
}
]
},
@@ -287,17 +271,9 @@
},
{
"type": "checkBox",
"name": "Stylized Episode Previews",
"description": "The episode previews in season view are sized based on horizontal resolution. This leads to a lot of wasted space on the episode summary and a high vertical page, which requires a lot of scrolling. This code reduces the height of episode entries, which solves both problems.",
"name": "Compact Episode View",
"description": "This reduces the height of episodes of a show.",
"css": "/* Size episode preview images in a more compact way */.listItemImage.listItemImage-large.itemAction.lazy {height: 110px;}.listItem-content {height: 115px;}.secondary.listItem-overview.listItemBodyText {height: 61px; margin: 0;}"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Custom Background Color",
"description": "Change background color.",
"css": ".backgroundContainer, .dialog, html { background-color: $;}",
"default": "rgba(0,0,0,.86)"
}
]
},
@@ -331,22 +307,59 @@
}
]
},
{
"type": "checkBox",
"name": "Blur episode thumbnail",
"description": "Blur episode thumbnail to prevent spoiler. Note: Doesn't in browser's that dont support backdrop-filter, i.e firefox(can be enabled though), opera and more(unknown).",
"css": " .nextUpSection.verticalSection.detailVerticalSection>div>div>div>div.cardScalable>button {filter: blur(10px);}div.listItem>div>div>button:nth-child(1) {transition: none !important;border-radius: 0px;height: 100%;width: 100%;backdrop-filter: blur(10px);}div.listItem>div>div>button:nth-child(1):hover {transition: none !important;border-radius: 0px;height: 100%;width: 100%;backdrop-filter: blur(10px);}#childrenContent>div>div>div>div.listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast>button {transition: none !important;border-radius: 0px;height: 100%;width: 100%;backdrop-filter: blur(10px);}#childrenContent>div>div>div>div.listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast>button:hover {border-radius: 0px;height: 85%;width: 85%;backdrop-filter: blur(20px);}@supports not ( (backdrop-filter: blur(10px)) or (--webkit-backdrop-filter: blur(10px))) {#childrenContent>div>div>div>div.listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast {filter: blur(10px);}}@supports not ( (backdrop-filter: blur(10px)) or (--webkit-backdrop-filter: blur(10px))) {#itemDetailPage>div.detailPageWrapperContainer>div.detailPageSecondaryContainer>div.detailPageContent>div.verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container>div.padded-top-focusscale.padded-bottom-focusscale.emby-scroller>.itemsContainer>.card.overflowBackdropCard.card-hoverable.card-withuserdata>div>.cardScalable {background: rgba(0, 0, 0, .5);filter: blur(10px);transition: none !important;filter: blur(10px);}}#itemDetailPage>div.detailPageWrapperContainer>div.detailPageSecondaryContainer>div.detailPageContent>div.verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container>div.padded-top-focusscale.padded-bottom-focusscale.emby-scroller>.itemsContainer>.card.overflowBackdropCard.card-hoverable.card-withuserdata>div>.cardScalable>button {border-radius: 0px;height: 0%;width: 0%;background: rgba(0, 0, 0, .5);filter: blur(10px);transition: none !important;backdrop-filter: blur(10px);}.cardScalable{overflow: hidden;}"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Right Header Color",
"description": "This modifies the colors of the cast, search and user buttons in the top right.",
"css": ".headerRight { color: $; }",
"name": "Button text color",
"description": "change button's text color.",
"css": ".raised{color: $;}",
"default": "#ffffff"
},
{
"type": "colorPicker",
"mode":"hex",
"name": "Button background color",
"description": "change background color of button.",
"css": ".raised{background-color: $;}",
"default": "#303030"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Idle button color-foreground",
"description": "This modifies the color of buttons like cast and search.",
"css": ".paper-icon-button-light{color: $; transititon: all .2s;}",
"default": "#ffffff"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Interact Buttons Color",
"description": "This modifies the color of interact buttons.",
"css": ".paper-icon-button-light { color: $ !important; } .paper-icon-button-light:hover:not(:disabled) { color:$ !important; background-color: $ !important; } .paper-icon-button-light:focus:not(:disabled) { color:$ !important; background-color: $ !important; }",
"default": "#ffffff",
"preview": "https://github.com/LambadaCorez/custom_css_jellyfin/blob/master/ui/buttons/colored_interact_buttons/colored_buttons_example3.png?raw=true"
"name": "Idle button color-background",
"description": "This modifies the background color of buttons like cast and search.",
"css": ".paper-icon-button-light{background-color: $ !important; transition: all .2s;}",
"default": "#00FFFFFF"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Hover button color-foreground",
"description": "This modifies the color of buttons like cast and search when your cursor is on it.",
"css": ".paper-icon-button-light:hover{color: $ !important;}",
"default": "#00a4dc"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Hover button color-background",
"description": "This modifies the background color of buttons like cast and search when your cursor is on it.",
"css": ".paper-icon-button-light:hover{background-color: $ !important;}",
"default": "#00a4dc"
},
{
"type": "number",

24
src/html/about.html
View File

@@ -30,36 +30,36 @@
<h3>Contributors</h3>
<p>The people who have helped in the development of this plugin are listed below</p>
<div class="cont">
<div class="contibutorsNames" style="background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/29411250?s=400&v=4);">
<a href="https://github.com/danieladov" class="contributorsLink">
<a href="https://github.com/danieladov" class="contributorsLink">
<div class="contibutorsNames" style="background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/29411250?s=400&v=4);">
<div class="top">
<h3>Daniel Álvarez</h3>
</div>@danieladov
<p class="description">
He is the creator of 3 Plugins for Jellyfin, namely- Merge Songs, Theme Music and Skin Manager
</p>
</a>
</div>
<div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars1.githubusercontent.com/u/55829513?s=460&u=3f232a3900ade07490ae8bdadd62ec5d0e9e4ecf&v=4);">
<a href="https://github.com/prayag17" class="contributorsLink">
</div>
</a>
<a href="https://github.com/prayag17" class="contributorsLink">
<div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars1.githubusercontent.com/u/55829513?s=460&u=3f232a3900ade07490ae8bdadd62ec5d0e9e4ecf&v=4);">
<div class="top">
<h3>Prayag Prajapati</h3>
</div>@prayag17
<p class="description">
He is the creator of 2 jellyfin Skins, namely- JellySkin and JellyFlix. He has helped in creating the "Custom" option in this plugin.
</p>
</a>
</div>
<div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/4365015?s=400&v=4);">
<a href="https://github.com/prayag17" class="contributorsLink">
</div>
</a>
<a href="https://github.com/prayag17" class="contributorsLink">
<div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/4365015?s=400&v=4);">
<div class="top">
<h3>Casper Talvio</h3>
</div>@CTalvio
<p class="description">
He is the creator of 2 jellyfin Skins namely- Monochromic and Kaleidochromic.
</p>
</a>
</div>
</div>
</a>
</div>
</fieldset>
</div>

25
src/html/style.css
View File

@@ -60,20 +60,21 @@ a {
display: flex;
}
.contibutorsNames {
padding: 1em;
border-radius: 15px;
width: fit-content;
max-width: 10em;
min-width: 10em;
flex-wrap: wrap;
height: fit-content;
transition: box-shadow .2s;
max-height: 20em;
min-height: 15em;
background-size: cover !important;
padding: 1em;
border-radius: 15px;
width: fit-content;
max-width: 10em;
min-width: 10em;
flex-wrap: wrap;
height: fit-content;
transition: all .2s;
max-height: 20em;
min-height: 15em;
background-size: cover !important;
}
.contibutorsNames:hover {
box-shadow: 0 0 17px -3px black;
box-shadow: 0 3px 5px 0px #6e6e6e;
transform: translateY(-2px);
}
.contributorsLink {
color: #3a3a3a !important;