diff --git a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html index 560be45..0675cec 100644 --- a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html +++ b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html @@ -2,1394 +2,1397 @@ Skin Manager + + +
-
-
-
-
-

Skin Manager

- Help -
-
-

Select the skin you want to install and click Set Skin

-
-
-
-
- - -
-
+
+
+ +
+

Skin Manager

+ Help
-
-
-
- +
+

Select the skin you want to install and click Set Skin

+
+
+
+
+ + +
+
+
+
+
+
+ +
-
- + + + + + - - - - -
diff --git a/skins-3.0.json b/skins-3.0.json index 43a1796..d39d6f8 100644 --- a/skins-3.0.json +++ b/skins-3.0.json @@ -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;}" } ] }, @@ -372,6 +384,12 @@ "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", diff --git a/src/html/help.html b/src/html/help.html index b2afe07..33b8c55 100644 --- a/src/html/help.html +++ b/src/html/help.html @@ -2,6 +2,7 @@ + Skin Manager-Help @@ -23,13 +24,24 @@

Steps


-
- + +
+

How to enable bluring of background fo dialogs and episode previes for Firefox

+
+

Steps

+
+ +
+
+ diff --git a/src/html/style.css b/src/html/style.css index 6bb0b95..cac69b8 100644 --- a/src/html/style.css +++ b/src/html/style.css @@ -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; +}