Re-factored code for top-left item background to be more dynamic

This commit is contained in:
loof2736 2024-05-19 18:54:43 -04:00
parent 30cf0b7b53
commit 039873f396
4 changed files with 24 additions and 30 deletions

View File

@ -71,29 +71,28 @@
margin-right: 3.3% !important;
}
/* Background for home, hamburger, and Jellyfin */
.layout-desktop:not(.transparentDocument) .headerLeft::before {
content: "";
position: absolute;
top: 39px;
left: 10px;
width: 245px;
height: 45px;
/* Background for top left buttons */
.layout-desktop .headerLeft {
padding: 2px 15px 2px 2px !important;
top: -3px !important;
background-color: rgba(35, 35, 35, 0.5) !important;
border-radius: 50px !important;
backdrop-filter: blur(50px) !important;
}
.headerLeft {
flex-grow: 0 !important;
-webkit-flex-grow: 0 !important;
}
.headerRight {
position: absolute !important;
right: 12px !important;
}
/* Reduce the size of the header when the logo is not present */
.layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
width: 160px;
}
.layout-desktop .headerLeft {
padding: 2px !important;
top: -3px !important;
}
.layout-desktop .pageTitle {
z-index: 1099 !important;
}

View File

@ -65,29 +65,28 @@
margin-right: 3.3% !important;
}
/* Background for home, hamburger, and Jellyfin */
.layout-desktop:not(.transparentDocument) .headerLeft::before {
content: "";
position: absolute;
top: 39px;
left: 10px;
width: 245px;
height: 45px;
/* Background for top left buttons */
.layout-desktop .headerLeft {
padding: 2px 15px 2px 2px !important;
top: -3px !important;
background-color: rgba(35, 35, 35, 0.5) !important;
border-radius: 50px !important;
backdrop-filter: blur(50px) !important;
}
.headerLeft {
flex-grow: 0 !important;
-webkit-flex-grow: 0 !important;
}
.headerRight {
position: absolute !important;
right: 12px !important;
}
/* Reduce the size of the header when the logo is not present */
.layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
width: 160px;
}
.layout-desktop .headerLeft {
padding: 2px !important;
top: -3px !important;
}
.layout-desktop .pageTitle {
z-index: 1099 !important;
}

View File

@ -1,9 +1,7 @@
/* Increase size of Jellyfin logo */
.layout-desktop .pageTitleWithLogo {
margin-left: 15px !important;
width: 100px !important;
height: 40px !important;
margin-top: 5px !important;
}
/* Static left drawer */

View File

@ -1,9 +1,7 @@
/* Increase size of Jellyfin logo */
.layout-desktop .pageTitleWithLogo {
margin-left: 15px !important;
width: 100px !important;
height: 40px !important;
margin-top: 5px !important;
}
/* Static left drawer */