Fix: Exclude vertical lists from 4615ef4dcc

- This can be configured using css variables
- Rearranged code for better manageability

Co-authored-by: Ahmed Hamdy <AhmedRadwan4@users.noreply.github.com>

README.md

@@ -27,14 +27,14 @@ This is a Jellyfin theme inspired from Jellyseerr to improve the overall look an
 
 ### ✨ Key Features
 
--   modern layouts and color tones
+- modern layouts and color tones
--   new and improved animations on most elements
+- new and improved animations on most elements
--   rounded corners and even spacing everywhere
+- rounded corners and even spacing everywhere
--   stylish borders, hover effects and shadows
+- stylish borders, hover effects and shadows
--   neat layout that puts important stuff up front
+- neat layout that puts important stuff up front
--   reduced unnecessary clutter
+- reduced unnecessary clutter
--   various fixes to improve the user experience
+- various fixes to improve the user experience
--   same clean design across phone, desktop, and TV
+- same clean design across phone, desktop, and TV
 
 <hr>
 
@@ -133,7 +133,7 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 
 <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/05eb7cb6-3ac9-444b-8988-9776e0815664" />
 
--   Read more about this experimental add-on [here](https://github.com/lscambo13/ElegantFin/blob/main/custom-media-covers.md)
+- Read more about this experimental add-on [here](https://github.com/lscambo13/ElegantFin/blob/main/custom-media-covers.md)
 
 </details>
 
@@ -143,55 +143,55 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <img width="auto" height="350" alt="image" src="https://github.com/user-attachments/assets/70834545-d1cd-4496-975a-4310030dedd9" />
 <img width="auto" height="350" alt="image" src="https://github.com/user-attachments/assets/c3cf2d96-0db0-4acb-bc61-7b08d5445452" />
 
--   Note: this customisation is not needed on Jellyfin 10.11.X anymore
+- Note: this customisation is not needed on Jellyfin 10.11.X anymore
 
--   On older Jellyfin versions, to enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.
+- On older Jellyfin versions, to enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.
--   Second, copy and paste the following code at the end in Custom CSS box but don't save yet.
+- Second, copy and paste the following code at the end in Custom CSS box but don't save yet.
     ```
     :root{
       --loginPageBgUrl: url("<YOUR-JELLYFIN-SERVER-ADDRESS>/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2");
     }
     ```
--   Third, replace `<YOUR-JELLYFIN-SERVER-ADDRESS>` with your Jellyfin server address, for example, `http://192.168.0.1:8096`.
+- Third, replace `<YOUR-JELLYFIN-SERVER-ADDRESS>` with your Jellyfin server address, for example, `http://192.168.0.1:8096`.
--   Don't forget the correct http or https in your domain.
+- Don't forget the correct http or https in your domain.
--   You can also modify the parameters, for example blur size or the resolution, according to your liking.
+- You can also modify the parameters, for example blur size or the resolution, according to your liking.
--   Once done, save and refresh your apps and webpages.
+- Once done, save and refresh your apps and webpages.
-</details>
+      </details>
 
 <details>
   <summary><i>3. Enable extra overlay buttons on cards on desktop</i></summary>
 
   <img width="400" height="auto" alt="image" src="https://github.com/user-attachments/assets/cb8479c2-c577-4d54-a567-697f54291a3b" />
 
--   To enable 'Mark Played' and 'Add to Favorites' buttons that show up at the bottom right corner of cards while hovering, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+- To enable 'Mark Played' and 'Add to Favorites' buttons that show up at the bottom right corner of cards while hovering, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
     ```
     :root{
       --extraCardButtonsVisibility: block;
     }
     ```
--   To hide them again, simply remove this code block or replace `block` with `none`.
+- To hide them again, simply remove this code block or replace `block` with `none`.
-</details>
+      </details>
 
 <details>
   <summary><i>4. Place the overlay play button at the center of cards on desktop</i></summary>
 
   <img width="400" height="auto" alt="image" src="https://github.com/user-attachments/assets/ebde9db6-cd2f-47b5-bdb9-cee1e9852e2e" />
 
--   To bring the mini play button to the center of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+- To bring the mini play button to the center of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
     ```
     :root{
       --overlayPlayButtonPosition: 50%;
     }
     ```
--   To undo this change, simply remove this code block or replace `50%` with `2.8em`.
+- To undo this change, simply remove this code block or replace `50%` with `2.8em`.
-</details>
+      </details>
 
 <details>
   <summary><i>5. Disable the card shinning effect on hover on desktop</i></summary>
 
 https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 
--   To disable the shine on cards that shows when hovering over them on desktop, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+- To disable the shine on cards that shows when hovering over them on desktop, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
 
 ```
   :root{
@@ -199,15 +199,15 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
   }
 ```
 
--   To undo this change, simply remove this code block or replace `none` with `""`.
+- To undo this change, simply remove this code block or replace `none` with `""`.
-</details>
+      </details>
 
 <details>
   <summary><i>6. Enable labels below library cards</i></summary>
 
   <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/5999a5de-5134-4b02-94aa-6306768a251c" />
 
--   To enable text labels under the media library cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+- To enable text labels under the media library cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
 
 ```
   :root{
@@ -215,31 +215,31 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
   }
 ```
 
--   To undo this change, simply remove this code block or replace `block` with `none`.
+- To undo this change, simply remove this code block or replace `block` with `none`.
-</details>
+      </details>
 
 <details>
   <summary><i>7. Enable alternative style for the Media Bar plugin</i></summary>
 
   <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/3e88e270-40f9-48ba-8173-f65b94344f8d" />
 
--   ElegantFin does not support any plugins by default, so to to add external support for [this plugin](https://github.com/IAmParadox27/jellyfin-plugin-media-bar), copy and paste the following code right after the main import in Custom CSS box, click save and finally refresh your app/webpage.
+- ElegantFin does not support any plugins by default, so to to add external support for [this plugin](https://github.com/IAmParadox27/jellyfin-plugin-media-bar), copy and paste the following code right after the main import in Custom CSS box, click save and finally refresh your app/webpage.
 
 ```
 	@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css");
 ```
 
--   To undo this change, simply remove this code block.
+- To undo this change, simply remove this code block.
-</details>
+      </details>
 
 <details>
   <summary><i>8. Switch between different app bar styles</i></summary>
 
 https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
 
--   You can switch between these using `--appBarHeight`.
+- You can switch between these using `--appBarHeight`.
--   Use 5em to enable the fading app bar (seamless) (default);
+- Use 5em to enable the fading app bar (seamless) (default);
--   Or, use 4.6em to get the solid app bar (cleaner with border)
+- Or, use 4.6em to get the solid app bar (cleaner with border)
 
 ```
 :root{
@@ -248,25 +248,25 @@ https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
 }
 ```
 
--   To undo this change, simply remove this code block.
+- To undo this change, simply remove this code block.
-</details>
+      </details>
 
 <details>
   <summary><i>9. Change to alternative color themes</i></summary>
 
   <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/0cab75aa-8fcd-4174-b0db-cc533b724bca" />
 
--   Check out the [the theme Playground page](https://github.com/lscambo13/ElegantFin/discussions/221) for different color themes.
+- Check out the [the theme Playground page](https://github.com/lscambo13/ElegantFin/discussions/221) for different color themes.
--   You can also experiment and share your own take there if you wish.
+- You can also experiment and share your own take there if you wish.
-</details>
+      </details>
 
 <hr>
 
 ### 🆗 Tested on
 
--   Jellyfin Server v10.11.5
+- Jellyfin Server v10.11.5
--   Microsoft Edge (Chromium)
+- Microsoft Edge (Chromium)
--   Jellyfin Android App v2.6.3
+- Jellyfin Android App v2.6.3
 
 <hr>
 
@@ -275,61 +275,61 @@ https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
 <details>
   <summary>1️⃣ - <i>How do I check if I am using the latest version of ElegantFin?</i></summary>
 
--   Check the version number at the bottom in the Settings screen.
+- Check the version number at the bottom in the Settings screen.
--   It should be something like `ElegantFin v25.XX.XX`.
+- It should be something like `ElegantFin v25.XX.XX`.
 
-    <img width="380" height="300" alt="image" src="https://github.com/user-attachments/assets/aecca6f5-7bd3-4057-9131-aa60b3becbaf" />
+        <img width="380" height="300" alt="image" src="https://github.com/user-attachments/assets/aecca6f5-7bd3-4057-9131-aa60b3becbaf" />
 
 </details>
 
 <details>
   <summary>2️⃣ - <i>I see that a newer version is available, but I have not received it yet. Why?</i></summary>
 
--   If the Settings footer shows an old version, it means that you are still using an old cache.
+- If the Settings footer shows an old version, it means that you are still using an old cache.
--   Once that cache is updated, the new version will be loaded automatically.
+- Once that cache is updated, the new version will be loaded automatically.
--   There are multiple ways to clear the cache depending on your OS, smartphone or TV. Look online if you don't know.
+- There are multiple ways to clear the cache depending on your OS, smartphone or TV. Look online if you don't know.
--   On the web version, you can force a hard refresh of the page using CTRL + F5.
+- On the web version, you can force a hard refresh of the page using CTRL + F5.
--   On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder.
+- On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder.
-</details>
+      </details>
 
 <details>
   <summary>3️⃣ - <i>Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?</i></summary>
 
--   JMP is based on Qt 5.x which uses a very outdated web engine. It does not support many new CSS features, so it is unsupported.
+- JMP is based on Qt 5.x which uses a very outdated web engine. It does not support many new CSS features, so it is unsupported.
--   [Jellyfin Desktop](https://github.com/jellyfin/jellyfin-desktop) is the new official client moving forward. It seems to be in testing right now. Use it for better compatibility or use the web app instead.
+- [Jellyfin Desktop](https://github.com/jellyfin/jellyfin-desktop) is the new official client moving forward. It seems to be in testing right now. Use it for better compatibility or use the web app instead.
-</details>
+  </details>
 
 <details>
   <summary>4️⃣ - <i>Does it work on the AndroidTV version of the Jellyfin app?</i></summary>
 
--   As of version 0.18.11, the official Jellyfin app on the AndroidTVs does not support css themes, but the Android mobile phone app supports them. The WebOS version of the app seems to be based on the mobile phone version, so it supports the theme just fine.
+- As of version 0.18.11, the official Jellyfin app on the AndroidTVs does not support css themes, but the Android mobile phone app supports them. The WebOS version of the app seems to be based on the mobile phone version, so it supports the theme just fine.
-</details>
+      </details>
 
 <details>
   <summary>5️⃣ - <i>All the icons on my LG TV seem to be broken. How to fix them?</i></summary>
 
--   It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) about this.
+- It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) about this.
--   This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.
+- This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.
--   Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages:
+- Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages:
     ```
     :root{
       --iconPack: 'Material Icons';
     }
     ```
-    </details>
+        </details>
 
 <details>
   <summary>6️⃣ - <i>How do I report bugs/issues?</i></summary>
 
--   First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) whether a similar issue has been reported already. If it exists, upvote and comment there to let me know.
+- First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) whether a similar issue has been reported already. If it exists, upvote and comment there to let me know.
--   Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).
+- Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).
 
 </details>
 <details>
   <summary>7️⃣ - <i>When can I expect another update?</i></summary>
 
--   🤷
+- 🤷
-</details>
+      </details>
 
 <hr>
 

Theme/ElegantFin-theme-nightly.css

@@ -55,6 +55,7 @@
     /* textures */
     --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
     --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), 25%, var(--lighterGradientPoint));
+    --backgroundAlphaOverlay: linear-gradient(180deg, var(--darkerGradientPointAlpha) 80%, transparent);
     --headerColorGradient: linear-gradient(180deg, rgba(30, 40, 54, 0.95) 30%, 55%, transparent 90%);
     --headerColorGradientAlt: linear-gradient(180deg, rgba(30, 40, 54, 1), 70%, transparent);
     --headerBlurMask: linear-gradient(180deg, white 50%, 85%, transparent);
@@ -118,9 +119,10 @@
        use 50% to place it at the center of a card */
     --overlayPlayButtonPosition: 2.8em;
 
-    /* use 'Material Icons Round' for the new icons [default]; 
+    /* use 'Material Symbols Rounded' for the new icons (~5mb) [default]; 
-       use 'Material Icons' to revert to old icons */
+       use 'Material Symbols Rounded Minimal' to reduce bandwidth usage (~115kb) (may break compatibility with plugins);
-    --iconPack: "Material Symbols Rounded", Material Icons;
+       use 'Material Icons' to revert to stock Jellyfin icons */
+    --iconPack: "Material Symbols Rounded";
 
     /* none: hides the watched and mark favorite buttons on hover [default];
        block: makes them visible use block */
@@ -142,8 +144,20 @@
        block: makes the title always visible */
     --itemTitleVisibility: none;
 
+    /* none: makes the music artist clear logo always hidden [default]; 
+       block: shows the music artist clear logo if it is available */
+    --artistClearLogoVisibility: block;
+
+    /* block: shows the text-based music artist title [default];
+       none: makes the music artist title always hidden */
+    --artistTitleVisibility: none;
+
+    /* none: makes the music artist page background fully visible [default]; 
+       unset: makes the background dim for better clear logo visibility on desktops */
+    --artistPageBackground: unset;
+
     /* block: shows the mini play or three-dot button on cards only on mobile [default]; 
-    none: makes them always hidden only on mobile */
+       none: makes them always hidden only on mobile */
     --miniOverlayButtonVisibility: block;
 
     /* use "" to enable the card hover effect [default]; 
@@ -197,30 +211,49 @@ select {
     --secondaryItemPageNegativeSpace: 45vh;
 }
 
-/* Material Icons Round */
+/* Material Symbols Rounded - Minimal */
 /* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=add,airplay,album,arrow_back,arrow_forward,arrow_upward,audiotrack,autorenew,backspace,book,brightness_high,call_split,cast,check,chevron_left,chevron_right,clear,close,closed_caption,cloud_download,content_copy,dashboard,delete,devices_other,download,drag_handle,dvr,exit_to_app,expand_more,explore,fast_forward,fast_rewind,favorite,fiber_manual_record,fiber_smart_record,file_download,filter_alt,folder,folder_open,forward_30,fullscreen,get_app,groups,home,image,info,info_outline,keyboard,keyboard_arrow_down,keyboard_arrow_left,keyboard_arrow_right,keyboard_arrow_up,keyboard_return,library_add_check,live_tv,local_movies,lock,lyrics,menu,mode_edit,more_vert,movie,music_note,music_video,navigate_before,navigate_next,pause,pause_circle_filled,pause_circle_outline,person,phonelink_lock,photo,photo_album,picture_in_picture_alt,play,play_arrow,play_circle_filled,play_circle_outline,playlist_add,preview,queue,queue_music,quiz,redo,refresh,remove_circle,remove_red_eye,repeat,repeat_one,replay,replay_10,save,schedule,search,settings,shuffle,skip_next,skip_previous,sort_by_alpha,space_bar,star,stop,storage,subtitles,sync,text_decrease,text_increase,theaters,toc,tv,undo,update,video_library,videocam,view_comfy,volume_off,volume_up */
 @font-face {
-  font-family: 'Material Symbols Rounded';
+    font-family: "Material Symbols Rounded Minimal";
-  font-style: normal;
+    font-style: normal;
-  font-weight: 100 700;
+    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=v338) format('woff2');
+    src: url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v341)
+        format("woff2");
+}
+
+/* Material Symbols Rounded - Full */
+/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 */
+@font-face {
+    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)
+        format("woff2");
 }
 
 .material-icons {
-  font-family: var(--iconPack) !important;
+    font-family:
-  font-weight: normal;
+        var(--iconPack),
-  font-style: normal;
+        Material Icons !important;
-  font-size: 24px;
+    font-weight: normal;
-  line-height: 1;
+    font-style: normal;
-  letter-spacing: normal;
+    line-height: 1;
-  text-transform: none;
+    letter-spacing: normal;
-  display: inline-block;
+    text-transform: none;
-  white-space: nowrap;
+    display: inline-block;
-  word-wrap: normal;
+    white-space: nowrap;
-  direction: ltr;
+    word-wrap: normal;
-  -webkit-font-feature-settings: 'liga';
+    direction: ltr;
-  -webkit-font-smoothing: antialiased;
+    vertical-align: middle;
-  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
+    text-rendering: geometricPrecision;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-feature-settings: "liga";
+    -webkit-font-smoothing: antialiased;
+    font-variation-settings:
+        "FILL" 1,
+        "wght" 400,
+        "GRAD" 0,
+        "opsz" 48;
 }
 
 .material-icons.info_outline:before {
@@ -436,7 +469,7 @@ select {
     bottom: 0;
     left: 0;
     right: 0;
-    transform: translateY(-50%) translateX(0);
+    transform: translateY(-100%) translateX(0);
     background: var(--hoverGradientV);
 }
 
@@ -447,7 +480,7 @@ select {
 
 .backdropCard.card-hoverable .cardOverlayContainer:after,
 .overflowBackdropCard.card-hoverable .cardOverlayContainer:after {
-    transform: translateY(0) translateX(-50%);
+    transform: translateY(0) translateX(-100%);
     background: var(--hoverGradientH);
 }
 
@@ -487,24 +520,27 @@ select {
     color: white;
 }
 
-.cardOverlayButton-br .cardOverlayButton-hover[data-action="menu"],
-.layout-desktop .listItemButton[data-action="menu"] {
-    display: none;
-}
-
 .layout-desktop .cardOverlayButton-br,
 [dir="ltr"].layout-desktop .cardOverlayButton-br {
-    bottom: 0.75em;
+    bottom: 1.2em;
-    right: 0.5em;
+    right: 0.7em;
-    display: var(--extraCardButtonsVisibility);
     z-index: 1;
+    font-size: 0.8em;
 }
 
-.layout-desktop .cardOverlayButton-br button {
+.layout-desktop .cardOverlayButton-br > button {
     color: white;
+    display: var(--extraCardButtonsVisibility);
     text-shadow: var(--shadow);
 }
 
+/* this keeps the three-dot menu button always visible on desktop because 
+Jellyfin disabled right-click functionality on newer versions */
+.cardOverlayButton-br .cardOverlayButton-hover[data-action="menu"],
+.layout-desktop .listItemButton[data-action="menu"] {
+    display: block;
+}
+
 .layout-mobile .cardOverlayButton {
     padding: 1em;
     font-size: 60%;
@@ -963,6 +999,7 @@ select {
 }
 
 .card .cardTextCentered {
+    /* text-align-last: left; */
     text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.8);
 }
 
@@ -1098,7 +1135,7 @@ select {
 }
 
 /* this is a workaround to add a gap between the last child and the edge of the screen on phones */
-.layout-mobile .itemsContainer:not(.editorsChoiceItemsContainer, .vertical-wrap)::after {
+.layout-mobile .itemsContainer:not(.editorsChoiceItemsContainer, .vertical-wrap, .vertical-list)::after {
     content: "13";
     color: transparent;
 }
@@ -1256,6 +1293,7 @@ select {
 #itemDetailPage:has(.subtitle) .itemBackdrop,
 #itemDetailPage:has(.musicParentName) .itemBackdrop,
 #itemDetailPage:has(.detailImageContainer .backdropCard) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .squareCard) .itemBackdrop,
 #itemDetailPage:has(.detailImageContainer .person) .itemBackdrop,
 #itemDetailPage:has(.detailImageContainer .queue) .itemBackdrop,
 #itemDetailPage:has(.detailImageContainer .book) .itemBackdrop,
@@ -1263,8 +1301,8 @@ select {
     height: calc(100vh - 27vh - var(--secondaryItemPageNegativeSpace));
 }
 
-#itemDetailPage:has(.detailImageContainer .cardPadder-square:not(.person)) .itemBackdrop {
+#itemDetailPage:has(.detailImageContainer .cardPadder-square > .person) .itemBackdrop {
-    height: calc(100vh - 20vh - var(--secondaryItemPageNegativeSpace));
+    height: calc(100vh - 8vh - var(--secondaryItemPageNegativeSpace));
 }
 
 .detailLogo {
@@ -1303,6 +1341,10 @@ select {
     top: calc(100vh - 6em - var(--secondaryItemPageNegativeSpace));
 }
 
+.layout-desktop #itemDetailPage:has(.detailImageContainer .person) .detailLogo {
+    top: calc(100vh - 1px - var(--secondaryItemPageNegativeSpace));
+}
+
 .layout-mobile #itemDetailPage:has(.subtitle) .detailLogo {
     top: calc(100vh - 11em - var(--secondaryItemPageNegativeSpace));
 }
@@ -1384,25 +1426,33 @@ select {
 
 /* this hides the detail logo  when media card is visible */
 #itemDetailPage:has(.detailImageContainer .backdropCard) .detailLogo,
-#itemDetailPage:has(.detailImageContainer .album) .detailLogo,
+#itemDetailPage:has(.detailImageContainer .album) .detailLogo {
-#itemDetailPage:has(.detailImageContainer .person) .detailLogo {
     z-index: 2;
     display: none;
 }
 
+#itemDetailPage:has(.detailImageContainer .person) .detailLogo {
+    z-index: 2;
+    display: var(--artistClearLogoVisibility);
+}
+
 /* this hides the main media title when the clear logo is available*/
 .detailLogo:not(.hide) ~ .detailPageWrapperContainer .nameContainer h1 {
     z-index: 2;
     display: var(--itemTitleVisibility);
 }
 
+.detailImageContainer:has(.squareCard .person) ~ .nameContainer h1 {
+    display: var(--artistTitleVisibility);
+}
+
 /* this shows the main media title and the poster when the clear logo is unavailable*/
 .detailLogo.hide ~ .detailPageWrapperContainer .nameContainer h1 {
     display: block !important;
 }
 
-.detailImageContainer:has(.backdropCard, .squareCard) ~ .nameContainer h1,
+.detailImageContainer:has(.backdropCard) ~ .nameContainer h1,
-.detailImageContainer:has(.cardImageIcon.person) ~ .nameContainer h1 {
+.detailImageContainer:has(.album) ~ .nameContainer h1 {
     display: block !important;
 }
 
@@ -1440,7 +1490,11 @@ select {
 
 #itemDetailPage:has(.subtitle),
 #itemDetailPage:has(.musicParentName) {
-    background: linear-gradient(180deg, var(--darkerGradientPointAlpha) 80%, transparent);
+    background: var(--backgroundAlphaOverlay);
+}
+
+#itemDetailPage:has(.detailImageContainer .cardPadder-square > .person) {
+    background: var(--artistPageBackground, var(--backgroundAlphaOverlay));
 }
 
 .layout-mobile #itemDetailPage:has(.detailImageContainer .backdropCard) .itemBackdrop,
@@ -2701,9 +2755,9 @@ div[data-role="controlgroup"] a.ui-btn-active {
     margin-bottom: 1.5em;
 }
 
-.layout-mobile .detailSection {
+/* .layout-mobile .detailSection {
     grid-template-columns: 1fr !important;
-}
+} */
 
 .detailPageContent {
     gap: 1em;
@@ -2740,6 +2794,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
 .trackSelections .selectContainer {
     max-width: unset !important;
     align-items: baseline;
+    /* margin: 0.25em !important; */
 }
 
 .selectArrowContainer {