New: Updated Material Symbols to latest version

dev: updated calc() functions to prevent issues caused by minification

.gitignore

@@ -1,2 +1,9 @@
 /tmp.txt
 /commits.csv
+/node_modules
+/Theme/mod.css
+/Theme/ElegantFin-theme-nightly-min.css
+/Theme/assets/add-ons/custom-media-covers-nightly-min.css
+/Theme/assets/add-ons/media-bar-plugin-support-nightly-min.css
+/Theme/assets/add-ons/seamless-fork-compatibility-nightly.css
+/Theme/assets/add-ons/seamless-fork-compatibility-nightly-min.css

Theme/ElegantFin-theme-nightly.css

@@ -1,4 +1,4 @@
-/* ElegantFin Theme for Jellyfin by lscambo13 */
+/*! ElegantFin Theme Nightly for Jellyfin by lscambo13 */
 
 /* Add-ons: Uncomment to enable */
 /* @import url(./assets/add-ons/media-bar-plugin-support-nightly.css); */
@@ -221,7 +221,7 @@ select {
     font-family: "Material Symbols Rounded Minimal";
     font-style: normal;
     font-weight: 100 700;
-    src: url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v341)
+    src: url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v346)
         format("woff2");
 }
 
@@ -231,7 +231,7 @@ select {
     font-family: "Material Symbols Rounded";
     font-style: normal;
     font-weight: 100 700;
-    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v341/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2)
+    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v346/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2)
         format("woff2");
 }
 
@@ -981,7 +981,7 @@ select {
 }
 
 .layout-mobile .card {
-    --padding: 1px;
+    --padding: 0px;
 }
 
 /* this makes the card sizes smaller when phone is in landscape mode */
@@ -1341,7 +1341,7 @@ select {
 }
 
 .layout-desktop #itemDetailPage:has(.detailImageContainer .person) .detailLogo {
-    top: calc(100vh - 1px - var(--secondaryItemPageNegativeSpace));
+    top: calc(100vh - var(--secondaryItemPageNegativeSpace));
 }
 
 .layout-mobile #itemDetailPage:has(.subtitle) .detailLogo {
@@ -2153,6 +2153,8 @@ progress + span {
     background: var(--lighterGradientPoint);
     border-bottom: var(--defaultBorder);
     backdrop-filter: var(--blurLarge);
+    height: 3.5em;
+    padding-top: max(env(safe-area-inset-top), var(--safe-area-inset-top));
 }
 
 .selectionCommandsPanel > h1 {
@@ -2198,7 +2200,7 @@ progress + span {
 }
 
 .overflowBackdropCard .cardText-first + .itemSelectionPanel > .checkboxContainer {
-    height: calc(100% - 0em);
+    height: 100%;
 }
 
 .checkboxContainer .emby-checkbox:checked + span + .checkboxOutline.multiSelectCheckboxOutline {
@@ -2226,7 +2228,7 @@ progress + span {
 
 .cardFooter + .itemSelectionPanel > .checkboxContainer,
 .cardScalable + .itemSelectionPanel > .checkboxContainer {
-    height: calc(100% - 0em);
+    height: 100%;
 }
 
 .checkboxOutline.multiSelectCheckboxOutline {
@@ -3020,6 +3022,10 @@ div[data-role="controlgroup"] a.ui-btn-active {
     padding-right: 0 !important;
 }
 
+.vertical-list > .listGroupHeader {
+    padding-left: 0.5ch;
+}
+
 .listPaging > span {
     padding: 0 0.5em;
 }
@@ -3082,7 +3088,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
 
 .sectionTitleTextButton > * {
     text-align: left;
-    /* !important are needed for proper alignment on phones */
+    /* the !important are needed for proper alignment on phones */
     padding: 0.3em 0 !important;
     margin: 0 0 !important;
     /* this prevents long library names from breaking into another line */
@@ -3518,7 +3524,7 @@ table:not(.MuiTable-root.MuiTable-stickyHeader) {
 }
 
 ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
-    /* ! Don't change these units. They are rem because that is standard for MUI */
+    /* Don't change these units. They are rem because that is standard for MUI */
     gap: 0.5rem;
 }
 

Theme/assets/add-ons/custom-media-covers-nightly.css

@@ -1,4 +1,4 @@
-/* Add-on: Custom media covers nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
+/*! Add-on: Custom Media Covers Nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
 
 :root {
     /* my media library default covers customizations */

Theme/assets/add-ons/media-bar-plugin-support-nightly.css

@@ -1,4 +1,4 @@
-/* Add-on: Media Bar plugin support nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
+/*! Add-on: Media Bar Plugin Support Nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
 /* this styles the media bar plugin - start */
 .play-button::before,
 .detail-button::before,

package.json

@@ -0,0 +1,18 @@
+{
+    "devDependencies": {
+        "css-declaration-sorter": "^7.4.0",
+        "cssnano": "^8.0.1",
+        "postcss": "^8.5.15",
+        "postcss-cli": "^11.0.1"
+    },
+    "scripts": {
+        "build:theme": "postcss ./Theme/ElegantFin-theme-nightly.css -o ./Theme/ElegantFin-jellyfin-theme-build-latest-minified.css",
+        "build:covers-addon": "postcss ./Theme/assets/add-ons/custom-media-covers-nightly.css -o ./Theme/assets/add-ons/custom-media-covers-latest-min.css",
+        "build:mediabar-addon": "postcss ./Theme/assets/add-ons/media-bar-plugin-support-nightly.css -o ./Theme/assets/add-ons/media-bar-plugin-support-latest-min.css",
+        "build:release": "npm run build:theme && npm run build:covers-addon && npm run build:mediabar-addon",
+        "watch:theme": "postcss ./Theme/ElegantFin-theme-nightly.css -o ./Theme/ElegantFin-theme-nightly-min.css --watch --verbose",
+        "watch:covers-addon": "postcss ./Theme/assets/add-ons/custom-media-covers-nightly.css -o ./Theme/assets/add-ons/custom-media-covers-nightly-min.css --watch --verbose",
+        "watch:mediabar-addon": "postcss ./Theme/assets/add-ons/media-bar-plugin-support-nightly.css -o ./Theme/assets/add-ons/media-bar-plugin-support-nightly-min.css --watch --verbose",
+        "watch:fixes-addon": "postcss ./Theme/assets/add-ons/seamless-fork-compatibility-nightly.css -o ./Theme/assets/add-ons/seamless-fork-compatibility-nightly-min.css --watch --verbose"
+    }
+}

postcss.config.js

@@ -0,0 +1,22 @@
+const cssDeclarationSorter = require('css-declaration-sorter');
+const cssnano = require('cssnano');
+
+module.exports = {
+	plugins: [
+		cssDeclarationSorter({
+			keepOverrides: true,
+			order: (a, b) => {
+				const aVar = a.startsWith('--');
+				const bVar = b.startsWith('--');
+
+				if (aVar && !bVar) return -1;
+				if (!aVar && bVar) return 1;
+
+				return a.localeCompare(b);
+			},
+		}),
+		cssnano({
+			preset: 'default',
+		}),
+	],
+};