mirror of
https://github.com/danieladov/jellyfin-plugin-skin-manager.git
synced 2026-01-18 16:37:31 +01:00
Daniel
GitHub
File diff suppressed because one or more lines are too long
@@ -326,12 +326,6 @@
|
||||
"name": "Enlarge Tab Buttons",
|
||||
"description": "Enlarges the tab buttons, suggested, genres, etc. By default they are really tiny, especially on mobile.",
|
||||
"css": ".headerTabs.sectionTabs {text-size-adjust: 110%; font-size: 110%;}.pageTitle {margin-top: auto; margin-bottom: auto;}.emby-tab-button {padding: 1.75em 1.7em;}"
|
||||
},
|
||||
{
|
||||
"type": "checkBox",
|
||||
"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;}"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -342,26 +336,44 @@
|
||||
"type": "selector",
|
||||
"name": "Poster card hover effect",
|
||||
"description": "Changes the hover effect on Movie/TV show/Music poster card.",
|
||||
"css": "",
|
||||
"selections": [
|
||||
{
|
||||
"name": "Scale in and out",
|
||||
"css": "/*Dynamic Poster effect-option1*/.cardBox-bottompadded{margin-bottom; 1em !important;}.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s;}.cardBox:hover {transform: scale(1.1);}"
|
||||
"css": "/*Dynamic Poster effect-option1*/.cardBox-bottompadded{margin-bottom; 1em !important;}.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s;}.card:hover .cardBox{transform: scale(1.1);}"
|
||||
},
|
||||
{
|
||||
"name": "Pop up and down",
|
||||
"css": "/*Dynamic Poster effect-option2*/.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s, box-shadow .2s;}.cardBox:hover {transform: translatey(-5px);box-shadow: 0px 5px 10px black;}"
|
||||
"css": "/*Dynamic Poster effect-option2*/.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s, box-shadow .2s;}.card:hover .cardBox{transform: translatey(-5px);box-shadow: 0px 5px 10px black;}"
|
||||
},
|
||||
{
|
||||
"name": "Poster Image in and out",
|
||||
"css": "/*Dynamic Poster effect-option3*/button.cardImageContainer:hover {filter: brightness(30%);transform: scale(1.1);}button.cardImageContainer {z-index: 1;transition: filter .2s, transform .25s;}.cardScalable {overflow: hidden;}"
|
||||
"css": "/*Dynamic Poster effect-option3*/.card:hover .cardImageContainer{filter:background-size: 120%} .cardImageContainer{background-size: 105%;transition: all .2s;}"
|
||||
},
|
||||
{
|
||||
"name": "Poster Image blur",
|
||||
"css": "/*Dynamic Poster effect-option4*/button.cardImageContainer:hover {filter: brightness(30%) blur(2px);}button.cardImageContainer {z-index: 1;transition: filter .2s;}"
|
||||
"css": "/*Dynamic Poster effect-option4*/.card:hover .cardImageContainer{filter: blur(2px);} .cardImageContainer{transition: all .2s;}"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "checkBox",
|
||||
"name": "Minimal Actor's card",
|
||||
"description": "display actor's cards in minimal and compact way",
|
||||
"css": "/*Actors*/.card[data-type=Actor] .cardBox {background: none;position: relative;}.card[data-type=Actor] .cardScalable {height: 0;overflow: hidden;padding-top: 100%;border-radius: var(--rounding);}.card[data-type=Actor] .cardText {position: absolute;background: transparent !important;}.card[data-type=Actor] .cardImageContainer::after {content: '';background: linear-gradient(360deg, rgba(0,0,0,0.75), transparent 70%);width: 100%;bottom: 0;position: absolute;padding-top: 100%;}.card[data-type=Actor].cardText-secondary {bottom: 0%;width: -webkit-fill-available;border-radius: 0px 0px 10px 10px;height: 22px;}.card[data-type=Actor] .cardText-first {bottom: 23.5px;width: -webkit-fill-available;height: 22px;}.layout-mobile .card[data-type=Actor] .cardText-first {color: white !important;}.card[data-type=Actor] .cardScalable {overflow: hidden;border-radius: var(--rounding);height: 3rem;}.card[data-type=Actor] .cardOverlayButton-br {position: absolute;bottom: 23% !important;right: 0 !important;}.card[data-type=Actor] .cardPadder {background: none;}.card[data-type=Actor] .cardImageIcon {bottom: 41%;position: absolute;left: 50%;transform: translateX(-50%);}"
|
||||
},
|
||||
{
|
||||
"type": "selector",
|
||||
"name": "Episode View",
|
||||
"description": "Theme episode list",
|
||||
"selections": [
|
||||
{
|
||||
"name": "Card",
|
||||
"css": " #itemDetailPage .vertical-list {display: grid;grid-template-columns: 30% 30% 30%;padding: 0 6px !important;height: fit-content;justify-content: space-evenly;-webkit-box-orient: horizontal;-webkit-box-direction: normal;margin: -6px;width: calc(100% - 6px);}.listItem-withContentWrapper:hover .listItemImageButton.itemAction.paper-icon-button-light {opacity: 100%;}@media (max-width: 901px){#itemDetailPage .vertical-list {grid-template-columns: 30% 30%;}}.listItem-withContentWrapper {transition: none;height: fit-content;max-width: 100%;margin: 6px;border-radius: var(--rounding);overflow: hidden;padding: 0;overflow: hidden;}.listItem-withContentWrapper:hover{background: transparent;}.listItem-content {height: 100%;}.listItem-content {display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;width: 100%;display: grid;grid-template-columns: 100%;}.listItemImage.listItemImage-large.itemAction.lazy {height: 14rem;width: 100%;padding: 0 !important;margin: 0 !important;top: 0;left: 0;}.layout-mobile #itemDetailPage .vertical-list {grid-template-columns: 100%;}.secondary.listItem-overview.listItemBodyText {height: fit-content;}.layout-mobile .listItem-bottomoverview {padding: 0 10px;}.listItemBody.itemAction {padding: 0 5px;}.listItemImageButton.itemAction.paper-icon-button-light {opacity: 0;color: var(--accent);transition: all .2s;}.layout-mobile .listItemImageButton.itemAction.paper-icon-button-light{opacity: 100% !important;}"
|
||||
},
|
||||
{
|
||||
"name": "Poster Image in and out",
|
||||
"css": "/*Dynamic Poster effect-option4*/button.cardImageContainer:hover {filter: brightness(30%) blur(2px);transform: scale(1.1);}button.cardImageContainer {z-index: 1;transition: filter .2s, transform .25s;}.cardScalable {overflow: hidden;}"
|
||||
"name": "Compact List",
|
||||
"css": ".listItemImage.listItemImage-large.itemAction.lazy {height: 110px;}.listItem-content {height: 115px;}.secondary.listItem-overview.listItemBodyText {height: 61px;margin: 0;}"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -371,6 +383,12 @@
|
||||
"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": "checkBox",
|
||||
"name": "Blur Dialog Background",
|
||||
"description": "Blur Menu and dialog background. Note: Works in Chrome and Edge only, functionalty can be enable, click on help button for info.",
|
||||
"css": ".mainDrawer {background: transparent;backdrop-filter: blur(20px);}"
|
||||
},
|
||||
{
|
||||
"type": "colorPicker",
|
||||
"mode": "hex",
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Skin Manager-Help</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" href="https://jellyfin.org/favicon.ico">
|
||||
@@ -23,13 +24,24 @@
|
||||
<h3>Steps</h3>
|
||||
<br>
|
||||
<ul>
|
||||
<li>Open this <a href="https://github.com/danieladov/jellyfin-plugin-skin-manager/issues" class="link" style="color: #3a3a3a !important; text-decoration: underline;">link</a>or click the "Request a Skin" option present in the header</li>
|
||||
<li>Then Create a New Issue with title- "Skin Request:"</li>
|
||||
<li>Done! Note:We will not add all the Skins.</li>
|
||||
<li>Open this<a href="https://github.com/danieladov/jellyfin-plugin-skin-manager/issues" class="link" style="color: #3a3a3a !important; text-decoration: underline;"> link </a>or click the "Request a Skin" option present in the header</li>
|
||||
<li>Then Create a New Issue with title- <code>Skin Request:</code> Done!</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<h1>How to enable bluring of background fo dialogs and episode previes for Firefox</h1>
|
||||
<div class="internal">
|
||||
<h3>Steps</h3>
|
||||
<br>
|
||||
<ul>
|
||||
<li>go to <a href="about:config"> about:config </a>in firefox and click on "Accept the Risk and Continue".</li>
|
||||
<li>Search for <code>layout.css.backdrop-filter.enabled</code> and change false to true.</li>
|
||||
<li>Search for <code>gfx.webrender.all</code> and change it to true. Done!</li>
|
||||
</ul>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -96,3 +96,12 @@ img.userImg {
|
||||
width: 50%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
code {
|
||||
display: block !important;
|
||||
width: fit-content;
|
||||
background: #585858;
|
||||
color: white;
|
||||
padding: .5rem;
|
||||
border-radius: 5.5px;
|
||||
border: .5px solid #999999;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user