From 4c0cf1464f79251a0d53f91b0d354eeeab04e1d8 Mon Sep 17 00:00:00 2001
From: HighImKevin <kevinjohncampbell@gmail.com>
Date: Wed, 28 Jan 2026 17:02:41 -0500
Subject: [PATCH] Add new CSS modules: Genre Thumbnails, Upcoming Calendar,
 Home Screen Section Grids

---
 scripts/skinConfig.js                         | 15 +++++++++++
 skins/chromic-kefin.css                       |  6 +++++
 skins/optional/global/genreThumbnails.css     | 27 +++++++++++++++++++
 skins/optional/global/upcomingCalendar.css    | 13 +++++++++
 .../optional/global/wrapHomeScrollerItems.css | 11 ++++++++
 5 files changed, 72 insertions(+)
 create mode 100644 skins/optional/global/genreThumbnails.css
 create mode 100644 skins/optional/global/upcomingCalendar.css
 create mode 100644 skins/optional/global/wrapHomeScrollerItems.css

diff --git a/scripts/skinConfig.js b/scripts/skinConfig.js
index 3ea2155..2354e06 100644
--- a/scripts/skinConfig.js
+++ b/scripts/skinConfig.js
@@ -75,6 +75,21 @@
                 name: 'Animated Overlay',
                 url: 'https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-AnimatedOverlay.css',
                 enabled: false
+            },
+            {
+                name: 'Wrap Items In Home Sections',
+                url: `${getKefinTweaksRoot()}skins/optional/global/wrapHomeScrollerItems.css`,
+                enabled: false
+            },
+            {
+                name: 'Genre Thumbnails',
+                url: `${getKefinTweaksRoot()}skins/optional/global/genreThumbnails.css`,
+                enabled: false
+            },
+            {
+                name: 'Upcoming Calendar View',
+                url: `${getKefinTweaksRoot()}skins/optional/global/upcomingCalendar.css`,
+                enabled: false
             }
         ],
         
diff --git a/skins/chromic-kefin.css b/skins/chromic-kefin.css
index d70c726..e6604aa 100644
--- a/skins/chromic-kefin.css
+++ b/skins/chromic-kefin.css
@@ -1,3 +1,9 @@
 #indexPage, #moviesPage, #tvRecommendedPage, #musicRecommendedPage {
     overflow-y: visible !important;
+}
+
+@media (min-aspect-ratio: 1.98 / 1) {
+    .detailPageContent .detailPagePrimaryContent {
+        padding-left: 0 !important;
+    }
 }
\ No newline at end of file
diff --git a/skins/optional/global/genreThumbnails.css b/skins/optional/global/genreThumbnails.css
new file mode 100644
index 0000000..cbc8811
--- /dev/null
+++ b/skins/optional/global/genreThumbnails.css
@@ -0,0 +1,27 @@
+.card[data-type="Genre"] a.cardImageContainer::after {
+  content: attr(aria-label);
+  font-size: 3rem;
+}
+
+.card[data-type="Genre"] {
+  --genre-color: hsl(210 20% 25%);
+}
+
+.card[data-type="Genre"]:nth-child(10n + 1) { --genre-color: hsl(0   55% 35%); }   /* red */
+.card[data-type="Genre"]:nth-child(10n + 2) { --genre-color: hsl(36  60% 35%); }   /* orange */
+.card[data-type="Genre"]:nth-child(10n + 3) { --genre-color: hsl(72  55% 35%); }   /* yellow-green */
+.card[data-type="Genre"]:nth-child(10n + 4) { --genre-color: hsl(108 50% 35%); }   /* green */
+.card[data-type="Genre"]:nth-child(10n + 5) { --genre-color: hsl(144 45% 35%); }   /* teal */
+.card[data-type="Genre"]:nth-child(10n + 6) { --genre-color: hsl(180 50% 35%); }   /* cyan */
+.card[data-type="Genre"]:nth-child(10n + 7) { --genre-color: hsl(216 55% 35%); }   /* blue */
+.card[data-type="Genre"]:nth-child(10n + 8) { --genre-color: hsl(252 50% 38%); }   /* indigo */
+.card[data-type="Genre"]:nth-child(10n + 9) { --genre-color: hsl(288 55% 38%); }   /* purple */
+.card[data-type="Genre"]:nth-child(10n + 10){ --genre-color: hsl(324 55% 38%); }   /* magenta */
+
+.card[data-type="Genre"] a.cardImageContainer {
+  background: var(--genre-color) !important;
+}
+
+.homeSectionsContainer .card[data-type="Genre"] .cardText {
+  visibility: hidden;
+}
\ No newline at end of file
diff --git a/skins/optional/global/upcomingCalendar.css b/skins/optional/global/upcomingCalendar.css
new file mode 100644
index 0000000..6f26a5a
--- /dev/null
+++ b/skins/optional/global/upcomingCalendar.css
@@ -0,0 +1,13 @@
+div#upcomingItems {
+  display: grid;
+  grid-template-columns: repeat(7, 14.285%);
+}
+
+div#upcomingItems .itemsContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+div#upcomingItems .itemsContainer .card {
+  width: 100%;
+}
\ No newline at end of file
diff --git a/skins/optional/global/wrapHomeScrollerItems.css b/skins/optional/global/wrapHomeScrollerItems.css
new file mode 100644
index 0000000..d068f66
--- /dev/null
+++ b/skins/optional/global/wrapHomeScrollerItems.css
@@ -0,0 +1,11 @@
+@media all and (min-width: 50em) {
+  .homePage .emby-scroller {
+    margin-right: 0;
+  }
+  .homePage .emby-scrollbuttons {
+    display: none;
+  }
+  .homePage .itemsContainer {
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file