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>

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,6 +144,18 @@
        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 */
     --miniOverlayButtonVisibility: block;
@@ -197,20 +211,32 @@ 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-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:
+        var(--iconPack),
+        Material Icons !important;
     font-weight: normal;
     font-style: normal;
-  font-size: 24px;
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;
@@ -218,9 +244,16 @@ select {
     white-space: nowrap;
     word-wrap: normal;
     direction: ltr;
-  -webkit-font-feature-settings: 'liga';
+    vertical-align: middle;
+    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;
+    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 {