From c75331fb23a4a3ae95bfd4c8bf5afa1e09e3e549 Mon Sep 17 00:00:00 2001
From: Wassax7 <charlywx7@gmail.com>
Date: Sun, 13 Apr 2025 16:03:52 +0200
Subject: [PATCH] Layout suggestions #42

---
 CSS/scyfin-theme.css | 268 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 242 insertions(+), 26 deletions(-)

diff --git a/CSS/scyfin-theme.css b/CSS/scyfin-theme.css
index af85302..aecb0d6 100644
--- a/CSS/scyfin-theme.css
+++ b/CSS/scyfin-theme.css
@@ -7,8 +7,8 @@
     --secondary-accent-color: #00a4dc20;
     --primary-background-color: #101010;
     --secondary-background-color: #181818;
-    --primary-background-transparent: rgba(35,35,35,0.5);
-    --secondary-background-transparent: rgba(0,0,0,0.6);
+    --primary-background-transparent: rgba(35, 35, 35, 0.5);
+    --secondary-background-transparent: rgba(0, 0, 0, 0.6);
     --rounded-cards: 15px;
     --blur: 10px;
 
@@ -21,7 +21,7 @@
 }
 
 /* Setting accent color variable */
-.emby-checkbox:checked + span + .checkboxOutline,
+.emby-checkbox:checked+span+.checkboxOutline,
 .selectionCommandsPanel,
 .countIndicator,
 .MuiButton-root.MuiButton-containedSizeMedium,
@@ -29,17 +29,21 @@
 progress[aria-valuenow]:before {
     background: var(--primary-accent-color) !important;
 }
+
 progress::-moz-progress-bar {
     background: var(--primary-accent-color) !important;
 }
+
 progress::-webkit-progress-value {
     background: var(--primary-accent-color) !important;
 }
+
 .MuiAlert-root.MuiAlert-standardInfo {
     background: var(--secondary-accent-color) !important;
 }
-.emby-checkbox:checked + span + .checkboxOutline,
-.emby-checkbox:focus:not(:checked) + span + .checkboxOutline,
+
+.emby-checkbox:checked+span+.checkboxOutline,
+.emby-checkbox:focus:not(:checked)+span+.checkboxOutline,
 .emby-input:focus,
 .emby-textarea:focus,
 .emby-select-withcolor:focus,
@@ -50,6 +54,7 @@ progress::-webkit-progress-value {
 .progressring-spiner {
     border-color: var(--primary-accent-color) !important;
 }
+
 .page:not(.itemDetailPage) .button-link,
 .selectLabelFocused,
 .textareaLabelFocused,
@@ -63,6 +68,7 @@ progress::-webkit-progress-value {
 #divRunningTasks span {
     color: var(--primary-accent-color) !important;
 }
+
 @media (hover: hover) and (pointer: fine) {
     .paper-icon-button-light:hover:not(:disabled) {
         color: var(--primary-accent-color) !important;
@@ -91,69 +97,86 @@ progress::-webkit-progress-value {
     /* Move drawer behind header */
     z-index: 998 !important;
 }
+
 /* Lower drawer buttons */
 .layout-desktop .mainDrawer-scrollContainer {
     margin-top: 95px !important;
     margin-left: 10px !important;
 }
+
 .layout-mobile .mainDrawer-scrollContainer {
     margin-top: 15px !important;
 }
+
 /* Shift content to the right */
 .layout-desktop .libraryPage:not(#editItemMetadataPage) {
     margin-left: 250px !important;
 }
+
 /* Fix for Jellyfin Media Player */
 .quickConnectSettingsContainer {
     margin-left: 250px !important;
 }
+
 /* Hide transition on page load */
 .layout-desktop .touch-menu-la.transition {
     transition: none !important;
 }
+
 /* Hide hamburger button */
 .layout-desktop .mainDrawerButton {
     display: none !important;
 }
+
 /* Fix for dashboard leaking out of the sections */
 .dashboardColumn {
     flex-shrink: inherit;
 }
+
 /* Fix for dashboard drawer button height */
 .layout-desktop .dashboardDocument .mainDrawer-scrollContainer {
     padding-top: 0 !important;
 }
+
 /* Hide home button */
 .layout-desktop .headerHomeButton {
     display: none !important;
 }
+
 .layout-desktop .dashboardDocument .headerHomeButton {
     display: block !important;
 }
+
 /* Fix for video player and login page */
 .layout-desktop .hide-scroll .mainDrawer,
 .layout-desktop .hideMainDrawer .mainDrawer {
     left: -320px !important;
 }
+
 /* Fix for scroll menus on home page */
 .emby-scroller {
     margin-right: -2% !important;
 }
+
 /* Fix for collection items misalignment */
 .layout-desktop .collectionItems .collectionItemsContainer {
     padding-left: 0% !important;
 }
+
 .layout-desktop .collectionItems .sectionTitleContainer {
     padding-left: 0% !important;
 }
+
 /* Dynamic buttons */
 .layout-desktop .navMenuOption:hover:not(.navMenuOption-selected) {
     transform: scale(1.05) !important;
 }
+
 .layout-desktop .listItem {
     transition: .2s !important;
     border-radius: var(--rounded-cards) !important;
 }
+
 .layout-desktop #myPreferencesMenuPage .listItem:hover {
     transform: scale(1.015);
 }
@@ -169,10 +192,12 @@ progress::-webkit-progress-value {
 .itemSelectionPanel {
     border-radius: var(--rounded-cards) !important;
 }
+
 /* Rounded selection menu */
 .itemSelectionPanel {
     border: 2px solid var(--primary-accent-color) !important;
 }
+
 .itemSelectionPanel .checkboxOutline {
     margin: 7px !important;
 }
@@ -186,9 +211,10 @@ progress::-webkit-progress-value {
     margin-bottom: 5px !important;
     padding: 5px 15px 5px 5px !important;
     bottom: 0% !important;
-    background: rgba(0,0,0,0.5) !important;
+    background: rgba(0, 0, 0, 0.5) !important;
     backdrop-filter: blur(var(--blur)) !important;
 }
+
 .fullInnerCardFooter {
     bottom: 5% !important;
     width: 90% !important;
@@ -197,27 +223,34 @@ progress::-webkit-progress-value {
     padding: 0px !important;
     backdrop-filter: none !important;
 }
+
 .itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) {
     height: 10px !important;
     background: var(--primary-background-transparent) !important;
     backdrop-filter: blur(2px) !important;
     border-radius: 100px !important;
 }
+
 .innerCardFooterClear {
     background-color: none !important;
 }
+
 .innerCardFooter .cardText {
     padding: 0 0 0 10px !important
 }
+
 .cardImageContainer .innerCardFooter .itemProgressBar .itemProgressBarForeground {
     background: var(--primary-accent-color) !important;
 }
+
 .itemProgressBarForeground {
     border-radius: 100px !important;
 }
-.transcodingProgress > div {
-    background-color: hsla(0,0%,100%,.2) !important;
+
+.transcodingProgress>div {
+    background-color: hsla(0, 0%, 100%, .2) !important;
 }
+
 .activeSession .backgroundProgress,
 .activeSession .playbackProgress,
 .activeSession .transcodingProgress {
@@ -226,13 +259,16 @@ progress::-webkit-progress-value {
     width: 90% !important;
     left: 5% !important;
 }
+
 .sessionNowPlayingInnerContent {
     padding-bottom: 12px !important;
     padding-inline: 17px !important;
 }
+
 .sessionAppInfo {
     padding: .5em 0em !important;
 }
+
 .sessionNowPlayingInfo {
     padding: .8em 0em !important;
 }
@@ -258,9 +294,11 @@ progress::-webkit-progress-value {
     margin-top: 3px !important;
     margin-bottom: 3px !important;
 }
+
 .navMenuOption:hover:not(.navMenuOption-selected) {
     background-color: rgba(44, 44, 44, 0.7);
 }
+
 /* Center icons and text and shift to the left */
 .navMenuOptionIcon,
 .navMenuOptionText {
@@ -268,10 +306,12 @@ progress::-webkit-progress-value {
     left: -10% !important;
     margin-top: 0 !important;
 }
+
 /* Fix for header buttons */
 .layout-desktop .emby-button-foreground {
     top: -9px !important;
 }
+
 .layout-tv .emby-button-foreground {
     top: -14px !important;
 }
@@ -296,13 +336,16 @@ html,
 .skinHeader {
     background-color: transparent !important;
 }
+
 .layout-desktop .skinHeader,
 .layout-tv .skinHeader {
     padding-top: 1.5em !important;
 }
+
 .layout-tv .skinHeader {
     padding-bottom: 10px !important;
 }
+
 /* Rounded header buttons */
 .headerTabs,
 .headerRight {
@@ -310,73 +353,90 @@ html,
     border-radius: 50px !important;
     backdrop-filter: blur(var(--blur)) !important;
 }
+
 .layout-desktop .headerTabs,
 .layout-tv .headerTabs {
     margin-bottom: 10px !important;
 }
+
 .layout-desktop .headerTabs {
     margin-left: 160px !important;
     margin-top: -58px !important;
 }
+
 /* Button height */
 .headerRight,
 .emby-tab-button {
     height: 45px !important;
 }
+
 /* Lower header and add padding to right buttons */
 .layout-desktop .headerRight {
     padding: 0px 5px !important;
 }
+
 .layout-tv .headerRight {
     padding: 20px 10px !important;
 }
+
 /* Move left header back up */
-.layout-desktop .headerLeft
-.layout-tv .headerLeft {
+.layout-desktop .headerLeft .layout-tv .headerLeft {
     position: relative !important;
     top: -17px !important;
 }
+
 /* Mobile fixes */
 .layout-mobile .headroom--unpinned {
     transform: translateY(-50%);
 }
+
 .layout-mobile .sectionTabs {
     margin-left: auto !important;
     margin-right: auto !important;
     width: auto !important;
     max-width: 100% !important;
 }
+
 .layout-mobile .emby-button-foreground {
     top: -2px !important;
 }
+
 .layout-mobile .skinHeader {
     transition: .1s !important;
 }
+
 .layout-mobile .mainDrawer {
     background: var(--secondary-background-color) !important;
 }
+
 .layout-mobile .headroom--unpinned {
     transform: none;
 }
-.layout-mobile .headroom--unpinned:has(.headerTabs.sectionTabs:not(.hide))  {
+
+.layout-mobile .headroom--unpinned:has(.headerTabs.sectionTabs:not(.hide)) {
     transform: translateY(-50%);
 }
+
 .layout-mobile .headroom--not-top {
     background: var(--primary-background-transparent) !important;
     backdrop-filter: blur(var(--blur)) !important;
 }
+
 .layout-mobile .headroom--not-top .headerRight {
     background: none !important;
 }
+
 .layout-mobile .headroom--top,
 .layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) {
     background: transparent !important;
     backdrop-filter: none !important;
 }
-.layout-mobile .headroom--top .headerRight ,
+
+.layout-mobile .headroom--top .headerRight,
 .layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) .headerRight {
     background: var(--primary-background-transparent) !important;
 }
+
 @media (max-width: 380px) {
     .layout-mobile .pageTitle:not(.pageTitleWithLogo):not(:empty) {
         position: absolute !important;
@@ -384,19 +444,24 @@ html,
         transform: translate(-50%, 0) !important;
         top: 60px !important;
     }
+
     .layout-mobile .headerTop:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) {
         -webkit-align-items: start !important;
         align-items: start !important;
     }
+
     .layout-mobile .skinHeader:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) {
         height: 110px !important;
     }
+
     .layout-mobile .skinHeader:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)):has(.sectionTabs:not(.hide)) {
         height: 140px !important;
     }
+
     .layout-mobile .libraryPage:not(.noSecondaryNavPage) {
         padding-top: 9.5em !important;
     }
+
     .layout-mobile .headroom--unpinned:has(.headerTabs.sectionTabs:not(.hide)):has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) {
         transform: translateY(-60%);
     }
@@ -405,40 +470,49 @@ html,
 
 
 /* Player modifications */
-.upNextContainer:not(#skipIntro), .toastVisible {
+.upNextContainer:not(#skipIntro),
+.toastVisible {
     backdrop-filter: blur(var(--blur)) !important;
 }
+
 .upNextContainer:not(#skipIntro) {
     border-radius: var(--rounded-cards) !important;
     background-color: rgba(0, 0, 0, 0.6) !important;
 }
+
 .upNextContainer {
     margin: 4% !important;
 }
+
 .toastVisible {
     border-radius: 30px !important;
     background-color: var(--primary-background-transparent) !important;
 }
+
 .sliderBubble {
     border-radius: var(--rounded-cards) !important;
     background-color: var(--secondary-background-transparent) !important;
     backdrop-filter: blur(var(--blur)) !important;
 }
+
 .sliderBubble:not(.osdVolumeSliderContainer .sliderBubble):has(.chapterThumbContainer) {
     background-color: #ffffff00 !important;
     top: 25px !important;
     backdrop-filter: unset !important;
 }
+
 .mdl-slider-background-flex {
     height: 10px !important;
     margin-top: -5px !important;
     border-radius: 100px !important;
-    background: hsla(0,0%,100%,.2) !important;
+    background: hsla(0, 0%, 100%, .2) !important;
 }
+
 .mdl-slider-background-lower {
     border-radius: 100px !important;
     background-color: var(--primary-accent-color) !important;
 }
+
 /* Moz */
 .mdl-slider::-moz-range-thumb {
     background: #ffffff00 !important;
@@ -446,10 +520,12 @@ html,
     width: 8px !important;
     border-radius: 2px !important;
 }
+
 .mdl-slider-hoverthumb:hover::-moz-range-thumb {
     transform: scaleY(2);
     background: #fff !important;
 }
+
 /* Webkit */
 .mdl-slider::-webkit-slider-thumb {
     background: #ffffff00 !important;
@@ -457,6 +533,7 @@ html,
     width: 8px !important;
     border-radius: 2px !important;
 }
+
 .mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
     transform: scaleY(2);
     background: #fff !important;
@@ -465,9 +542,10 @@ html,
 .mdl-slider-background-upper {
     border-top-right-radius: 100px !important;
     border-bottom-right-radius: 100px !important;
-    background: hsla(0,0%,100%,.2) !important;
+    background: hsla(0, 0%, 100%, .2) !important;
     transform: translateX(-3px) !important;
 }
+
 .iconOsdProgressInner {
     background: var(--primary-accent-color) !important;
 }
@@ -476,6 +554,7 @@ html,
 .upNextDialog-buttons .upNextDialog-button {
     transition: .2s !important;
 }
+
 .upNextDialog-buttons .upNextDialog-button:hover {
     transform: scale(1.1);
 }
@@ -486,17 +565,21 @@ html,
     border-radius: var(--rounded-cards) !important;
     box-shadow: unset !important;
 }
+
 .chapterThumb {
     border-radius: var(--rounded-cards) !important;
     margin-bottom: 47px !important;
     box-shadow: 0 0 1.9vh #000 !important;
 }
+
 .chapterThumbTextContainer {
     background: none !important;
 }
+
 .chapterThumbText {
     text-align: center !important;
 }
+
 .chapterThumbText-dim {
     display: none !important;
 }
@@ -507,58 +590,72 @@ html,
     border-radius: 100px !important;
     backdrop-filter: blur(var(--blur)) !important;
 }
+
 #skipIntro .btnSkipIntro:hover {
     transition: .2s;
     transform: scale(1.05);
     background: var(--primary-accent-color) !important;
 }
+
 #skipIntro .paper-icon-button-light:hover:not(:disabled) {
     color: #FFF !important;
 }
+
 .sliderContainer:has(.mdl-slider-hoverthumb:not(:hover)) .sliderMarker {
     opacity: 0 !important;
     transition: 0.2s !important;
 }
+
 .sliderContainer:has(.mdl-slider-hoverthumb:hover) .sliderMarker {
     opacity: 1 !important;
     transition: 0.2s !important;
     height: 10px !important;
-    transform: translate3d(0,40%,0) !important;
-    -webkit-transform: translate3d(0,40%,0) !important;
+    transform: translate3d(0, 40%, 0) !important;
+    -webkit-transform: translate3d(0, 40%, 0) !important;
 }
+
 .sliderMarker.watched {
     background-color: #FFFFFF90 !important;
     z-index: 10 !important;
 }
+
 #skipIntro .upNextContainer {
     padding: 0px !important;
 }
+
 #skipIntro .emby-button {
     background: rgba(30, 30, 30, 0.7) !important;
 }
+
 #skipIntro .emby-button:hover {
     box-shadow: 0 0 8px rgba(var(--primary-accent-color), 0.6) !important;
 }
+
 #skipIntro .emby-button:focus {
     background: rgba(30, 30, 30, 0.7) !important;
     box-shadow: unset !important;
 }
+
 /* Support for InPlayerEpisodePreview plugin */
 .layout-desktop #popupFocusContainer {
     padding: 10px !important;
 }
+
 .layout-desktop #popupTitleContainer {
     margin: 0px !important;
     padding: 10px 0px 10px 0px !important;
 }
+
 .layout-desktop #popupContentContainer .previewEpisodeDetails {
     position: unset !important;
     margin: 0px 0px 6px 10px !important;
     font-size: 13.5px !important;
 }
+
 .layout-desktop #popupContentContainer .previewEpisodeTitle {
     font-size: 16.5px !important;
 }
+
 .layout-desktop #popupContentContainer .listItem {
     padding: .25em .25em .25em .5em !important;
 }
@@ -567,9 +664,11 @@ html,
 .material-icons.fast_rewind::before {
     content: "\e059";
 }
+
 .material-icons.fast_forward::before {
     content: "\e057";
 }
+
 .material-icons.audiotrack::before {
     content: "\e91f";
 }
@@ -584,6 +683,7 @@ html,
 .subtitleappearance-preview {
     border-radius: var(--rounded-cards) !important;
 }
+
 .button-submit,
 .emby-select,
 .checkboxOutline,
@@ -592,33 +692,42 @@ html,
 .raised {
     border-radius: 100px !important;
 }
+
 .button-submit {
     background: var(--primary-accent-color) !important;
 }
+
 /* Modify username placement on profile page */
-.layout-desktop #userProfilePage .readOnlyContent div:not([class]), div[class=""]{
+.layout-desktop #userProfilePage .readOnlyContent div:not([class]),
+div[class=""] {
     align-items: initial !important;
 }
+
 .layout-desktop .username {
     margin: 0px 0px 10px 10px !important;
 }
+
 /* Red shutdown button */
 #btnShutdown {
     background: #AE3739 !important;
 }
+
 /* Remove border under certain dashboard items */
 .listItem-border {
     border: 0 !important;
 }
+
 /* Add padding to list items */
 .layout-desktop .listItem,
 .layout-tv .listItem {
     padding-inline: 15px !important;
 }
+
 /* Rounded dashboard cards */
 .cardBox {
     border-radius: var(--rounded-cards) !important;
 }
+
 /* Removed ugliness of border-card styling */
 .layout-desktop fieldset.verticalSection-extrabottompadding,
 .layout-tv fieldset.verticalSection-extrabottompadding {
@@ -626,146 +735,183 @@ html,
     border-color: #3B3B3B !important;
     padding: 10px 35px !important;
 }
+
 /* Rounded tab selections in dashboard */
 .layout-desktop .localnav {
     border-radius: 100px !important;
     background: #202020 !important;
     width: fit-content !important;
 }
+
 .layout-desktop a[data-role="button"] {
     background: none !important;
 }
+
 .layout-desktop div[data-role="controlgroup"] a.ui-btn-active {
     background: var(--primary-accent-color) !important;
     border-radius: 100px !important;
 }
+
 .layout-desktop .dashboardDocument .mainAnimatedPage {
     left: 260px !important;
 }
+
 #libraryDisplayPage,
 #metadataImagesConfigurationPage,
 #metadataNfoPage {
     margin-top: 40px !important;
 }
+
 #mediaLibraryPage {
     margin-top: 10px !important;
 }
+
 /* Re-align active devices in dashboard */
 .activeDevices.itemsContainer {
     margin: 0px !important;
 }
-.playbackProgress > div {
+
+.playbackProgress>div {
     background: var(--primary-accent-color) !important;
 }
+
 /* IntroSkipper settings */
 .layout-desktop summary {
     border-radius: 100px !important;
 }
+
 .layout-desktop fieldset.verticalSection-extrabottompadding,
 .layout-tv fieldset.verticalSection-extrabottompadding {
     padding: 10px 35px 20px 35px !important;
 }
+
 #intro_reqs,
 #edl,
 #silence,
 #support {
     padding-bottom: 10px !important;
 }
+
 /* Dashboard fixes for 10.9.x */
 .layout-desktop #userProfilesPage {
     left: 260px !important;
 }
+
 .MuiAlert-message {
     color: #fff !important;
 }
+
 .MuiDataGrid-root.MuiDataGrid-withBorderColor {
     border-radius: var(--rounded-cards) !important;
 }
+
 .infoBanner {
     border-radius: var(--rounded-cards) !important;
 }
+
 .MuiToggleButton-root.MuiToggleButtonGroup-groupedHorizontal {
     border-radius: var(--rounded-cards);
     padding-inline: 15px !important;
 }
+
 .MuiAppBar-root.MuiAppBar-positionFixed {
     padding: 10px !important;
 }
+
 .MuiAppBar-root.MuiAppBar-positionFixed.MuiAppBar-colorPrimary {
     background: var(--primary-background-transparent) !important;
     backdrop-filter: blur(var(--blur)) !important;
 }
+
 .MuiList-root.MuiList-subheader {
     padding-left: 10px !important;
 }
+
 .MuiList-subheader .MuiListItem-root.MuiListItem-gutters {
     width: 85% !important;
     margin-inline: auto !important;
 }
+
 /* Fix for plugins section of dashboard */
 [aria-labelledby="plugins-subheader"].MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters {
     width: 85% !important;
     margin-inline: auto !important;
 }
+
 .MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters {
     border-radius: 100px !important;
     margin: 2px 0px !important;
     transition: .2s !important;
     height: 45px !important
 }
+
 .MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters:not(.Mui-selected) .MuiListItemIcon-root,
 .MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters:not(.Mui-selected) {
     color: #D1D1D1
 }
+
 .MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters:hover:not(.Mui-selected) {
     transform: scale(1.05) !important;
     background: rgba(44, 44, 44, 0.7) !important;
 }
+
 .MuiListItemButton-root.Mui-selected {
     background: var(--secondary-accent-color) !important;
 }
+
 .MuiListItemButton-root.Mui-selected .MuiListItemIcon-root,
 .MuiListItemButton-root.Mui-selected {
     color: var(--primary-accent-color) !important;
 }
+
 .MuiPaper-root.MuiDrawer-paperAnchorDockedLeft {
     border-right: none !important;
     background: var(--secondary-background-color) !important;
     width: 250px !important;
 }
+
 .MuiListItemIcon-root.MuiSvgIcon-fontSizeMedium {
     color: inherit !important;
 }
+
 .MuiPaper-root.MuiPopover-paper {
     background: #252525 !important;
     color: #D1D1D1 !important;
     border-radius: var(--rounded-cards) !important;
 }
+
 .listItemIcon:not(.listItemIcon-transparent):not(.notification_important) {
     background: var(--secondary-accent-color) !important;
     color: var(--primary-accent-color) !important;
 }
+
 .MuiList-root:not(.MuiList-subheader) .MuiListItemButton-root.MuiListItemButton-gutters {
     padding: 20px 38px 10px 38px !important;
 }
+
 .MuiCollapse-root.MuiCollapse-vertical .MuiListItemButton-root.MuiListItemButton-gutters {
     width: 85% !important;
     margin-inline: auto !important;
     padding: 8px 16px !important;
 }
+
 /* Dynamic colors for "Active Devices" section to respect theme */
 .defaultCardBackground1 {
     background-color: var(--primary-alt1) !important;
 }
+
 .defaultCardBackground2 {
     background-color: var(--primary-alt2) !important;
 }
+
 .defaultCardBackground3 {
     background-color: var(--primary-alt3) !important;
 }
+
 .defaultCardBackground4 {
     background-color: var(--primary-alt4) !important;
 }
+
 .defaultCardBackground5 {
     background-color: var(--primary-alt5) !important;
 }
@@ -776,21 +922,27 @@ html,
 .layout-desktop .editPageSidebar {
     width: 25vw !important;
 }
+
 .layout-desktop .editPageInnerContent {
     width: 74vw !important;
 }
+
 .jstree-default-large .jstree-node {
     line-height: 35px !important;
 }
+
 .jstree-default .jstree-wholerow-clicked {
     background: var(--secondary-accent-color) !important;
 }
+
 .jstree-wholerow-hovered {
     background: var(--primary-background-transparent) !important;
 }
+
 .jstree-children {
     margin-left: -10px !important;
 }
+
 #editItemMetadataPage .btnHeaderSave {
     background: var(--primary-accent-color) !important;
     border-radius: 100px !important;
@@ -809,7 +961,11 @@ html,
 /* Re-position content on details page */
 .layout-desktop .detailSection {
     margin-right: 0 !important;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
 }
+
 .layout-desktop .detailPageContent {
     padding-left: 3.3% !important;
 }
@@ -832,6 +988,10 @@ html,
     background: var(--primary-background-transparent) !important;
     border-radius: 100px !important;
     backdrop-filter: blur(var(--blur)) !important;
+    /* Move buttons */
+    position: absolute;
+    top: 110px;
+    right: 5%;
 }
 
 /* Add card around groups section */
@@ -846,7 +1006,8 @@ html,
 }
 
 /* Fix for group section labels */
-.detailsGroupItem .label, .trackSelections .selectContainer .selectLabel {
+.detailsGroupItem .label,
+.trackSelections .selectContainer .selectLabel {
     min-width: 75px;
     flex-basis: unset;
     margin: unset;
@@ -863,9 +1024,10 @@ html,
 .layout-desktop .detailSectionContent {
     background: var(--secondary-background-color) !important;
     border-radius: var(--rounded-cards) !important;
-    padding: 40px 20px 10px 20px !important;
-    margin-top: 50px !important;
+    padding: 20px 20px 10px 20px !important;
+    margin-top: 0 !important;
 }
+
 .layout-mobile .detailSectionContent {
     background: var(--secondary-background-color) !important;
     border-radius: var(--rounded-cards) !important;
@@ -877,7 +1039,7 @@ html,
     background: var(--secondary-background-color) !important;
     border-radius: var(--rounded-cards) !important;
     padding: 10px 20px !important;
-    margin-top: 20px !important;
+    margin-top: 100px !important;
 }
 
 /* Fix for track select dropdowns */
@@ -891,13 +1053,16 @@ html,
     margin-top: 245px !important;
     margin-left: 20.8vw !important;
 }
+
 .layout-desktop .detailPagePrimaryContainer {
     padding-left: 3.3% !important;
 }
+
 .layout-desktop .nameContainer {
     position: absolute !important;
     margin-top: -48px !important;
 }
+
 .layout-desktop .itemMiscInfo {
     position: absolute !important;
     margin-left: 12px !important;
@@ -908,18 +1073,22 @@ html,
 .layout-desktop .detailPagePrimaryContent {
     padding-left: 20.4vw !important;
 }
+
 /* Padding for 2:3 posters */
 .layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .portraitCard) .detailPagePrimaryContent {
     min-height: 29vw !important;
 }
+
 /* Padding for 1:1 posters */
 .layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .squareCard) .detailPagePrimaryContent {
     min-height: 20vw !important;
-} 
+}
+
 /* Padding for 16:9 posters */
 .layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .backdropCard) .detailPagePrimaryContent {
     min-height: 12vw !important;
 }
+
 /* Fix for JMP */
 @supports not selector(:has(*)) {
     .layout-desktop .detailPageWrapperContainer .detailPagePrimaryContent {
@@ -936,26 +1105,31 @@ html,
     -moz-box-orient: vertical;
     box-orient: vertical;
 }
+
 .detailSection .detailSectionContent {
     -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
     box-ordinal-group: 1;
 }
+
 .detailSection .recordingFields {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     box-ordinal-group: 2;
 }
+
 .detailSection .trackSelections {
     -webkit-box-ordinal-group: 3;
     -moz-box-ordinal-group: 3;
     box-ordinal-group: 3;
 }
+
 .detailSection .itemDetailsGroup {
     -webkit-box-ordinal-group: 4;
     -moz-box-ordinal-group: 4;
     box-ordinal-group: 4;
 }
+
 /* Move episode title */
 .layout-desktop .nameContainer {
     display: -webkit-box;
@@ -965,28 +1139,34 @@ html,
     -moz-box-orient: horizontal;
     box-orient: horizontal;
 }
+
 .layout-desktop .nameContainer .parentName {
     -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
     box-ordinal-group: 1;
 }
+
 .layout-desktop .nameContainer .itemName {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     box-ordinal-group: 2;
 }
+
 /* Modify original title / episode name position */
 .layout-desktop .nameContainer .itemName.originalTitle {
     margin: .5em 20px !important;
 }
+
 .layout-desktop .nameContainer .itemName.infoText.subtitle {
     margin: .5em 20px !important;
     padding: 0px !important;
 }
+
 /* Modify play button */
 .layout-desktop .mainDetailButtons .btnPlay::after {
     content: "Play" !important;
 }
+
 .layout-desktop .mainDetailButtons .btnPlay {
     position: relative !important;
     margin-right: -85px !important;
@@ -996,10 +1176,12 @@ html,
     border-radius: 100px !important;
     color: var(--secondary-background-color) !important;
 }
+
 .layout-desktop .mainDetailButtons .detailButton {
     -webkit-flex-direction: row !important;
     flex-direction: row !important;
 }
+
 /* Change crop for list item images */
 .listItemImage {
     background-size: contain !important;
@@ -1013,16 +1195,20 @@ html,
 .programCell-active {
     background: var(--secondary-background-color) !important;
 }
+
 /* Repositioned record button */
 .recordingFields {
     margin: 5px 0 -7px 0 !important;
 }
+
 .recordingButton {
     height: 40px !important;
 }
+
 .recordingIcon {
     color: red !important;
 }
+
 /* Remove overlapping text */
 .itemMiscInfo.itemMiscInfo-secondary {
     margin-left: 65px !important;
@@ -1034,20 +1220,25 @@ html,
 .layout-desktop .appfooter {
     margin-left: 250px !important;
 }
+
 .layout-desktop .appfooter .nowPlayingBarInfoContainer {
     margin-left: 10px !important;
 }
+
 .layout-desktop .volumeOsd {
     border-radius: var(--rounded-cards) !important;
     background: var(--secondary-background-transparent) !important;
 }
+
 .layout-desktop .nameContainer .musicParentName {
     margin-top: 18px !important;
     margin-right: 22px !important;
 }
+
 .layout-desktop .appfooter .nowPlayingBar {
     margin-top: 20px !important;
 }
+
 .layout-desktop .appfooter .nowPlayingBar .nowPlayingBarPositionContainer {
     top: -15px !important;
 }
@@ -1059,24 +1250,30 @@ html,
     .layout-desktop .headerRight {
         margin-bottom: 0 !important;
     }
+
     .layout-desktop .emby-button-foreground {
         top: -4px !important;
     }
 }
+
 @media (max-width: 1599px) {
     .layout-desktop .pageTitleWithLogo {
         margin-left: 25px !important;
     }
+
     .layout-desktop .headerTabs {
         margin-top: -65px !important;
     }
+
     .layout-desktop .headerRight {
         margin-right: 15px !important;
     }
+
     .layout-desktop .sectionTabs {
         width: auto !important;
         align-self: center !important;
     }
+
     .layout-desktop .emby-button-foreground {
         top: -2px !important;
     }
@@ -1088,6 +1285,7 @@ html,
 .layout-tv .sectionTabs {
     width: auto !important;
 }
+
 .layout-tv .headerLeft {
     padding: 5px !important;
 }
@@ -1100,12 +1298,14 @@ html,
     justify-content: center;
     align-items: center;
 }
+
 .layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
     background: var(--secondary-background-color) !important;
     width: 400px !important;
     border-radius: 25px !important;
     padding: 50px !important;
 }
+
 /* Fix padding if login disclaimer is not present */
 .layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y:not(:has(.loginDisclaimer p)) {
     padding-bottom: 100px !important;
@@ -1119,11 +1319,13 @@ html,
     margin-top: 70px !important;
     text-align: left !important;
 }
+
 .layout-desktop #loginPage .visualLoginForm {
     position: relative !important;
     background: var(--secondary-background-color) !important;
     z-index: 1000 !important;
 }
+
 .layout-desktop #loginPage .btnForgotPassword {
     background: none !important;
     font-weight: normal !important;
@@ -1136,6 +1338,7 @@ html,
     color: rgba(255, 255, 255, 0.5) !important;
     z-index: 1 !important;
 }
+
 .layout-desktop #loginPage .loginDisclaimerContainer {
     top: 130px !important;
     position: relative !important;
@@ -1143,34 +1346,42 @@ html,
     width: 500px !important;
     margin-top: -35px !important;
 }
+
 .layout-desktop #loginPage .squareCard {
     width: 25% !important;
     font-size: smaller !important;
 }
+
 @media (max-width: 100em) {
     .layout-desktop #loginPage .squareCard {
         width: 20% !important;
     }
+
     .layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
         width: 600px !important;
     }
+
     .layout-desktop #loginPage .btnForgotPassword {
         margin-left: 450px !important;
     }
+
     .layout-desktop #loginPage .disclaimerContainer {
         width: 700px !important;
     }
 }
+
 @media (max-width: 87.5em) {
     .layout-desktop #loginPage .squareCard {
         width: 20% !important;
     }
 }
+
 @media (max-width: 75em) {
     .layout-desktop #loginPage .squareCard {
         width: 20% !important;
     }
 }
+
 @media (max-width: 43.75em) {
     .layout-desktop #loginPage .squareCard {
         width: 20% !important;
@@ -1183,6 +1394,7 @@ html,
 .dialog {
     background-color: var(--secondary-background-color) !important;
 }
+
 .actionSheetTitle {
     margin: 10px 20px !important;
 }
@@ -1200,17 +1412,20 @@ html,
 }
 
 /* Transparent drawer */
-.layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer {
+.layout-desktop .backgroundContainer.withBackdrop+div .mainDrawer {
     background: linear-gradient(to right, #10101090, transparent) !important;
 }
+
 .layout-desktop:has(#itemDetailPage.noBackdropTransparency) .mainDrawer {
     background: var(--secondary-background-color) !important;
 }
+
 /* Fix for JMP */
 @supports not selector(:has(*)) {
-    .layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer {
+    .layout-desktop .backgroundContainer.withBackdrop+div .mainDrawer {
         background: transparent !important;
     }
+
     .layout-desktop #itemDetailPage.noBackdropTransparency::after {
         position: fixed;
         content: "";
@@ -1226,6 +1441,7 @@ html,
 .layout-desktop:has(.backgroundContainer.withBackdrop) .navMenuOption-selected {
     backdrop-filter: blur(var(--blur)) !important;
 }
+
 .layout-desktop:has(.backgroundContainer.withBackdrop) .navMenuOption:hover:not(.navMenuOption-selected) {
     background: var(--primary-background-transparent) !important;
     backdrop-filter: blur(var(--blur)) !important;