From 702f32d0cd04b69f36e718805fedad096636088f Mon Sep 17 00:00:00 2001 From: HighImKevin Date: Thu, 12 Feb 2026 06:54:42 -0500 Subject: [PATCH] Add new optional CSS modules --- scripts/skinConfig.js | 40 ++++++++++++++++++- scripts/skinManager.js | 6 +-- skins/optional/global/genreThumbnails.css | 1 + .../global/hideTitleIfLogoPresent.css | 3 ++ .../global/noClearArtOnSpotlights.css | 3 ++ .../global/sectionControlsOnHover.css | 7 ++++ .../global/sortPeopleWithImagesFirst.css | 9 +++++ skins/optional/global/studioThumbnails.css | 37 +++++++++++++++++ .../global/tallerSpotlightSections.css | 7 ++++ 9 files changed, 108 insertions(+), 5 deletions(-) create mode 100644 skins/optional/global/hideTitleIfLogoPresent.css create mode 100644 skins/optional/global/noClearArtOnSpotlights.css create mode 100644 skins/optional/global/sectionControlsOnHover.css create mode 100644 skins/optional/global/sortPeopleWithImagesFirst.css create mode 100644 skins/optional/global/studioThumbnails.css create mode 100644 skins/optional/global/tallerSpotlightSections.css diff --git a/scripts/skinConfig.js b/scripts/skinConfig.js index c087a22..7f72035 100644 --- a/scripts/skinConfig.js +++ b/scripts/skinConfig.js @@ -90,6 +90,36 @@ name: 'Upcoming Calendar View', url: `${getKefinTweaksRoot()}skins/optional/global/upcomingCalendar.css`, enabled: false + }, + { + name: 'Hide Title If Logo Present', + url: `${getKefinTweaksRoot()}skins/optional/global/hideTitleIfLogoPresent.css`, + enabled: false + }, + { + name: 'Sort People With Images First', + url: `${getKefinTweaksRoot()}skins/optional/global/sortPeopleWithImagesFirst.css`, + enabled: false + }, + { + name: 'Taller Spotlight Sections', + url: `${getKefinTweaksRoot()}skins/optional/global/tallerSpotlightSections.css`, + enabled: false + }, + { + name: 'No Clear Art on Spotlights', + url: `${getKefinTweaksRoot()}skins/optional/global/noClearArtOnSpotlights.css`, + enabled: false + }, + { + name: 'Show Section Controls On Hover Only', + url: `${getKefinTweaksRoot()}skins/optional/global/sectionControlsOnHover.css`, + enabled: false + }, + { + name: 'Studio Thumbnails', + url: `${getKefinTweaksRoot()}skins/optional/global/studioThumbnails.css`, + enabled: false } ], @@ -332,11 +362,17 @@ url: [ { majorServerVersions: [10], - urls: ['https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism7.css'] + urls: [ + 'https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism7.css', + `${getKefinTweaksRoot()}skins/finimalism-kefin.css` + ] }, { majorServerVersions: [11], - urls: ['https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism10.11.css'] + urls: [ + 'https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism10.11.css', + `${getKefinTweaksRoot()}skins/finimalism-kefin.css` + ] } ], colorSchemes: [], diff --git a/scripts/skinManager.js b/scripts/skinManager.js index f0a6819..853272d 100644 --- a/scripts/skinManager.js +++ b/scripts/skinManager.js @@ -2859,6 +2859,9 @@ window.KefinTweaksConfig = ${JSON.stringify(configToBackup, null, 2)};`; // Step 1: Load the new CSS first (gets cached and starts loading) requestAnimationFrame(async () => { + // Load optional includes for this skin + loadOptionalIncludes(skin); + const cssUrls = await getSkinUrlsForCurrentVersion(skin); if (!cssUrls || cssUrls.length === 0) { @@ -2872,9 +2875,6 @@ window.KefinTweaksConfig = ${JSON.stringify(configToBackup, null, 2)};`; loadSkinCSS(url, skin.name); } }); - - // Load optional includes for this skin - loadOptionalIncludes(skin); }); } diff --git a/skins/optional/global/genreThumbnails.css b/skins/optional/global/genreThumbnails.css index 40eef59..009b6b6 100644 --- a/skins/optional/global/genreThumbnails.css +++ b/skins/optional/global/genreThumbnails.css @@ -6,6 +6,7 @@ text-align: center; overflow: hidden; text-overflow: ellipsis; + text-transform: capitalize; } .layout-mobile .card[data-type="Genre"] a.cardImageContainer::after { diff --git a/skins/optional/global/hideTitleIfLogoPresent.css b/skins/optional/global/hideTitleIfLogoPresent.css new file mode 100644 index 0000000..8bec92b --- /dev/null +++ b/skins/optional/global/hideTitleIfLogoPresent.css @@ -0,0 +1,3 @@ +:has(.detailLogo:not(.hide)) .nameContainer { + display: none; +} \ No newline at end of file diff --git a/skins/optional/global/noClearArtOnSpotlights.css b/skins/optional/global/noClearArtOnSpotlights.css new file mode 100644 index 0000000..36e3c3c --- /dev/null +++ b/skins/optional/global/noClearArtOnSpotlights.css @@ -0,0 +1,3 @@ +.spotlight-clearart { + display: none !important; +} \ No newline at end of file diff --git a/skins/optional/global/sectionControlsOnHover.css b/skins/optional/global/sectionControlsOnHover.css new file mode 100644 index 0000000..500ba71 --- /dev/null +++ b/skins/optional/global/sectionControlsOnHover.css @@ -0,0 +1,7 @@ +.custom-scroller-container:hover button.show-all-button, +.custom-scroller-container:hover .section-refresh-button { + visibility: visible; +} +button.show-all-button, .section-refresh-button { + visibility: hidden; +} \ No newline at end of file diff --git a/skins/optional/global/sortPeopleWithImagesFirst.css b/skins/optional/global/sortPeopleWithImagesFirst.css new file mode 100644 index 0000000..86724eb --- /dev/null +++ b/skins/optional/global/sortPeopleWithImagesFirst.css @@ -0,0 +1,9 @@ +div#castCollapsible .itemsContainer, +div#guestCastCollapsible .itemsContainer { + display: flex; +} + +div#castCollapsible .itemsContainer .card:has(.defaultCardBackground), +div#guestCastCollapsible .itemsContainer .card:has(.defaultCardBackground) { + order: 1; +} \ No newline at end of file diff --git a/skins/optional/global/studioThumbnails.css b/skins/optional/global/studioThumbnails.css new file mode 100644 index 0000000..0b179f8 --- /dev/null +++ b/skins/optional/global/studioThumbnails.css @@ -0,0 +1,37 @@ +.card[data-type="Studio"] a.cardImageContainer:not(.lazy-loaded)::after { + content: attr(aria-label); + font-size: 3em; + max-width: calc(100% - 1em); + white-space: pre-wrap; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + text-transform: capitalize; +} + +.layout-mobile .card[data-type="Studio"] a.cardImageContainer:not(.lazy-loaded)::after { + font-size: 2em; +} + +.card[data-type="Studio"] { + --genre-color: hsl(210 20% 25%); +} + +.card[data-type="Studio"]:nth-child(10n + 10) { --genre-color: hsl(0 55% 35%); } /* red */ +.card[data-type="Studio"]:nth-child(10n + 9) { --genre-color: hsl(36 60% 35%); } /* orange */ +.card[data-type="Studio"]:nth-child(10n + 8) { --genre-color: hsl(72 55% 35%); } /* yellow-green */ +.card[data-type="Studio"]:nth-child(10n + 7) { --genre-color: hsl(108 50% 35%); } /* green */ +.card[data-type="Studio"]:nth-child(10n + 6) { --genre-color: hsl(144 45% 35%); } /* teal */ +.card[data-type="Studio"]:nth-child(10n + 5) { --genre-color: hsl(180 50% 35%); } /* cyan */ +.card[data-type="Studio"]:nth-child(10n + 4) { --genre-color: hsl(216 55% 35%); } /* blue */ +.card[data-type="Studio"]:nth-child(10n + 3) { --genre-color: hsl(252 50% 38%); } /* indigo */ +.card[data-type="Studio"]:nth-child(10n + 2) { --genre-color: hsl(288 55% 38%); } /* purple */ +.card[data-type="Studio"]:nth-child(10n + 1){ --genre-color: hsl(324 55% 38%); } /* magenta */ + +.card[data-type="Studio"] a.cardImageContainer:not(.lazy-loaded) { + background: var(--genre-color) !important; +} + +.homeSectionsContainer .card[data-type="Studio"] .cardText { + visibility: hidden; +} \ No newline at end of file diff --git a/skins/optional/global/tallerSpotlightSections.css b/skins/optional/global/tallerSpotlightSections.css new file mode 100644 index 0000000..adbe843 --- /dev/null +++ b/skins/optional/global/tallerSpotlightSections.css @@ -0,0 +1,7 @@ +.spotlight-banner-container { + height: 600px !important; +} +.spotlight-item-logo { + height: 300px !important; + max-width: none !important; +} \ No newline at end of file