Created custom styling for checkbox

Jellyfin.Plugin.MediaCleaner/Pages/global.css

@@ -24,6 +24,25 @@ td, th {
     text-align: left;
 }
 
+.table-text {
+    font-size: large;
+    text-align: center;
+}
+
+/* Custom emby checkbox for table */
+.table-checkbox {
+    padding-left: 1.05rem;
+}
+
+.table-checkbox .checkboxContainer .emby-checkbox-label .checkboxOutline {
+    height: 1.5em;
+    width: 1.5em;
+}
+
+.table-checkbox .checkboxContainer .emby-checkbox-label {
+    height: 1.8em
+}
+
 .links {
     background-color: #0f0f0f;
     border: 1px solid #00a4dc;

Jellyfin.Plugin.MediaCleaner/Pages/home.html

@@ -13,7 +13,7 @@
                     <thead>
                         <tr>
                             <th>Name</th>
-                            <th class="actions-cell">Actions</th>
+                            <th></th>
                         </tr>
                     </thead>
                     <tbody></tbody>
@@ -26,7 +26,7 @@
                         <tr>
                             <th>Name</th>
                             <th>Seasons</th>
-                            <th class="actions-cell">Actions</th>
+                            <th></th>
                         </tr>
                     </thead>
                     <tbody></tbody>

Jellyfin.Plugin.MediaCleaner/Pages/home.js

@@ -66,22 +66,39 @@ const selectedMovies = new Set();
 const selectedTvShows = new Set();
 
 const createCheckbox = (mediaInfo = {}, state = []) => {
-  const checkbox = document.createElement('input');
+    const container = document.createElement('div');
-  checkbox.type = 'checkbox';
+    container.className = 'checkboxContainer';
-  checkbox.dataset.mediaInfo = JSON.stringify(mediaInfo) || '';
+    container.style.marginBottom = 0;
 
-  checkbox.addEventListener('change', (e) => {
+    const label = document.createElement('label');
-    const mediaInfo = checkbox.dataset.mediaInfo || '(no info)';
+    label.className = 'emby-checkbox-label';
-    if (checkbox.checked) {
+    label.style.textAlign = 'center';
-      state.add(mediaInfo);
+    label.style.paddingLeft = '1.8em';
-    } else {
-      state.delete(mediaInfo);
-    }
-    // Update UI or state — use console.log for debugging
-    console.log('selected:', Array.from(state));
-  });
 
-  return checkbox;
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.setAttribute('is', 'emby-checkbox');
+    checkbox.dataset.mediaInfo = JSON.stringify(mediaInfo) || '';
+
+    const span = document.createElement('span');
+    span.textContent = '';
+
+    label.appendChild(checkbox);
+    label.appendChild(span);
+    container.appendChild(label);
+
+    checkbox.addEventListener('change', (e) => {
+        const mediaInfo = checkbox.dataset.mediaInfo || '(no info)';
+        if (checkbox.checked) {
+            state.add(mediaInfo);
+        } else {
+            state.delete(mediaInfo);
+        }
+        // Update UI or state — use console.log for debugging
+        console.log('selected:', Array.from(state));
+    });
+
+    return container;
 };
 
 const populateTables = async () => {
@@ -100,8 +117,9 @@ const populateTables = async () => {
             var cell1 = row.insertCell(0);
             var cell2 = row.insertCell(1);
             cell1.innerHTML = moviesInfo[i].Name;
+            cell1.className = "table-text";
             cell2.appendChild(createCheckbox(moviesInfo[i], selectedMovies));
-            cell2.className = "actions-cell";
+            cell2.className = "table-checkbox"
         }
     }
     else{
@@ -110,6 +128,7 @@ const populateTables = async () => {
         var cell1 = row.insertCell(0);
         cell1.colSpan = columnCount;
         cell1.innerHTML = "No stale movies found.";
+        cell1.className = "table-text";
     }
 
     if(seriesInfo.length > 0){
@@ -119,9 +138,11 @@ const populateTables = async () => {
             var cell2 = row.insertCell(1);
             var cell3 = row.insertCell(2);
             cell1.innerHTML = seriesInfo[i].Name;
+            cell1.className = "table-text";
             cell2.innerHTML = seriesInfo[i].Seasons.map(season => season.replace("Season ", "")).join(", ");
+            cell2.className = "table-text";
             cell3.appendChild(createCheckbox(seriesInfo[i], selectedTvShows));
-            cell3.className = "actions-cell";
+            cell3.className = "table-checkbox"
         }
     }
     else{
@@ -130,6 +151,7 @@ const populateTables = async () => {
         var cell1 = row.insertCell(0);
         cell1.colSpan = columnCount;
         cell1.innerHTML = "No stale series found.";
+        cell1.className = "table-text";
     }
 };