mirror of
https://github.com/loof2736/scyfin.git
synced 2025-11-05 00:38:53 +01:00
Re-factored code for top-left item background to be more dynamic
This commit is contained in:
parent
30cf0b7b53
commit
039873f396
@ -71,29 +71,28 @@
|
|||||||
margin-right: 3.3% !important;
|
margin-right: 3.3% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Background for home, hamburger, and Jellyfin */
|
/* Background for top left buttons */
|
||||||
.layout-desktop:not(.transparentDocument) .headerLeft::before {
|
.layout-desktop .headerLeft {
|
||||||
content: "";
|
padding: 2px 15px 2px 2px !important;
|
||||||
position: absolute;
|
top: -3px !important;
|
||||||
top: 39px;
|
|
||||||
left: 10px;
|
|
||||||
width: 245px;
|
|
||||||
height: 45px;
|
|
||||||
background-color: rgba(35, 35, 35, 0.5) !important;
|
background-color: rgba(35, 35, 35, 0.5) !important;
|
||||||
border-radius: 50px !important;
|
border-radius: 50px !important;
|
||||||
backdrop-filter: blur(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 */
|
/* Reduce the size of the header when the logo is not present */
|
||||||
.layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
|
.layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
|
||||||
width: 160px;
|
width: 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-desktop .headerLeft {
|
|
||||||
padding: 2px !important;
|
|
||||||
top: -3px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-desktop .pageTitle {
|
.layout-desktop .pageTitle {
|
||||||
z-index: 1099 !important;
|
z-index: 1099 !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -65,29 +65,28 @@
|
|||||||
margin-right: 3.3% !important;
|
margin-right: 3.3% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Background for home, hamburger, and Jellyfin */
|
/* Background for top left buttons */
|
||||||
.layout-desktop:not(.transparentDocument) .headerLeft::before {
|
.layout-desktop .headerLeft {
|
||||||
content: "";
|
padding: 2px 15px 2px 2px !important;
|
||||||
position: absolute;
|
top: -3px !important;
|
||||||
top: 39px;
|
|
||||||
left: 10px;
|
|
||||||
width: 245px;
|
|
||||||
height: 45px;
|
|
||||||
background-color: rgba(35, 35, 35, 0.5) !important;
|
background-color: rgba(35, 35, 35, 0.5) !important;
|
||||||
border-radius: 50px !important;
|
border-radius: 50px !important;
|
||||||
backdrop-filter: blur(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 */
|
/* Reduce the size of the header when the logo is not present */
|
||||||
.layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
|
.layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
|
||||||
width: 160px;
|
width: 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-desktop .headerLeft {
|
|
||||||
padding: 2px !important;
|
|
||||||
top: -3px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-desktop .pageTitle {
|
.layout-desktop .pageTitle {
|
||||||
z-index: 1099 !important;
|
z-index: 1099 !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
/* Increase size of Jellyfin logo */
|
/* Increase size of Jellyfin logo */
|
||||||
.layout-desktop .pageTitleWithLogo {
|
.layout-desktop .pageTitleWithLogo {
|
||||||
margin-left: 15px !important;
|
|
||||||
width: 100px !important;
|
width: 100px !important;
|
||||||
height: 40px !important;
|
height: 40px !important;
|
||||||
margin-top: 5px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Static left drawer */
|
/* Static left drawer */
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
/* Increase size of Jellyfin logo */
|
/* Increase size of Jellyfin logo */
|
||||||
.layout-desktop .pageTitleWithLogo {
|
.layout-desktop .pageTitleWithLogo {
|
||||||
margin-left: 15px !important;
|
|
||||||
width: 100px !important;
|
width: 100px !important;
|
||||||
height: 40px !important;
|
height: 40px !important;
|
||||||
margin-top: 5px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Static left drawer */
|
/* Static left drawer */
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user