mirror of
https://github.com/loof2736/scyfin.git
synced 2025-11-04 08:28:52 +01:00
Compare commits
No commits in common. "main" and "v1.0.10" have entirely different histories.
92
CSS/css-scyfin/disable-static-drawer-backdrop.css
Normal file
92
CSS/css-scyfin/disable-static-drawer-backdrop.css
Normal file
@ -0,0 +1,92 @@
|
||||
/* Reset size of Jellyfin logo */
|
||||
.layout-desktop .pageTitleWithLogo {
|
||||
margin-left: 25px !important;
|
||||
height: 30px !important;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
/* Un-static left drawer */
|
||||
.layout-desktop .mainDrawer:not(.dashboardDocument .mainDrawer) {
|
||||
left: -345px !important;
|
||||
width: 275px !important;
|
||||
/* Move drawer behind header */
|
||||
z-index: 1099 !important;
|
||||
/* Modified background color */
|
||||
background-color: rgba(35, 35, 35, 0.5) !important;
|
||||
border-radius: 25px !important;
|
||||
backdrop-filter: blur(50px) !important;
|
||||
}
|
||||
|
||||
/* Lower drawer buttons */
|
||||
.layout-desktop .mainDrawer-scrollContainer {
|
||||
margin-top: 15px !important;
|
||||
margin-left: 25px !important;
|
||||
}
|
||||
|
||||
/* Shift content back to the left */
|
||||
.layout-desktop .libraryPage:not(#editItemMetadataPage) {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
/* Fix for Jellyfin Media Player */
|
||||
.quickConnectSettingsContainer {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
/* Add transition back */
|
||||
.layout-desktop .touch-menu-la.transition {
|
||||
transition: transform .24s ease-out,left .26s ease-out,-webkit-transform .24s ease-out !important;
|
||||
}
|
||||
|
||||
/* Show hamburger button */
|
||||
.layout-desktop .mainDrawerButton:not(.dashboardDocument .mainDrawerButton) {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
/* Fix for dashboard */
|
||||
.layout-desktop .dashboardDocument .mainDrawer {
|
||||
top: 0px !important;
|
||||
left: 0px !important;
|
||||
width: 300px !important;
|
||||
z-index: 998 !important;
|
||||
}
|
||||
.layout-desktop .dashboardDocument .mainDrawer-scrollContainer {
|
||||
padding-top: 75px !important;
|
||||
}
|
||||
|
||||
/* Re-center header buttons */
|
||||
.layout-desktop .headerTabs {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
/* Hide home button */
|
||||
.layout-desktop .headerHomeButton {
|
||||
display: block !important;
|
||||
}
|
||||
.layout-desktop .dashboardDocument .headerHomeButton {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Fix for scroll menus on home page */
|
||||
.emby-scroller {
|
||||
margin-right: 3.3% !important;
|
||||
}
|
||||
|
||||
/* Background for home, hamburger, and Jellyfin */
|
||||
.layout-desktop .headerLeft::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 270px;
|
||||
height: 45px;
|
||||
background-color: rgba(35, 35, 35, 0.5) !important;
|
||||
border-radius: 50px !important;
|
||||
backdrop-filter: blur(50px) !important;
|
||||
}
|
||||
.layout-desktop .headerLeft {
|
||||
padding: 2px !important;
|
||||
top: -3px !important;
|
||||
}
|
||||
.layout-desktop .pageTitle {
|
||||
z-index: 1099 !important;
|
||||
}
|
||||
86
CSS/css-scyfin/disable-static-drawer.css
Normal file
86
CSS/css-scyfin/disable-static-drawer.css
Normal file
@ -0,0 +1,86 @@
|
||||
/* Reset size of Jellyfin logo */
|
||||
.layout-desktop .pageTitleWithLogo {
|
||||
margin-left: 25px !important;
|
||||
height: 30px !important;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
/* Un-static left drawer */
|
||||
.layout-desktop .mainDrawer:not(.dashboardDocument .mainDrawer) {
|
||||
left: -320px !important;
|
||||
/* Move drawer behind header */
|
||||
z-index: 1099 !important;
|
||||
}
|
||||
|
||||
/* Lower drawer buttons */
|
||||
.layout-desktop .mainDrawer-scrollContainer {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
|
||||
/* Shift content back to the left */
|
||||
.layout-desktop .libraryPage:not(#editItemMetadataPage) {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
/* Fix for Jellyfin Media Player */
|
||||
.quickConnectSettingsContainer {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
/* Add transition back */
|
||||
.layout-desktop .touch-menu-la.transition {
|
||||
transition: transform .24s ease-out,left .26s ease-out,-webkit-transform .24s ease-out !important;
|
||||
}
|
||||
|
||||
/* Show hamburger button */
|
||||
.layout-desktop .mainDrawerButton:not(.dashboardDocument .mainDrawerButton) {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
/* Fix for dashboard */
|
||||
.layout-desktop .dashboardDocument .mainDrawer {
|
||||
top: 0px !important;
|
||||
left: 0px !important;
|
||||
width: 300px !important;
|
||||
z-index: 998 !important;
|
||||
}
|
||||
.layout-desktop .dashboardDocument .mainDrawer-scrollContainer {
|
||||
padding-top: 75px !important;
|
||||
}
|
||||
|
||||
/* Re-center header buttons */
|
||||
.layout-desktop .headerTabs {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
/* Hide home button */
|
||||
.layout-desktop .headerHomeButton {
|
||||
display: block !important;
|
||||
}
|
||||
.layout-desktop .dashboardDocument .headerHomeButton {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Fix for scroll menus on home page */
|
||||
.emby-scroller {
|
||||
margin-right: 3.3% !important;
|
||||
}
|
||||
|
||||
/* Background for home, hamburger, and Jellyfin */
|
||||
.layout-desktop .headerLeft::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 270px;
|
||||
height: 45px;
|
||||
background-color: rgba(35, 35, 35, 0.5) !important;
|
||||
border-radius: 50px !important;
|
||||
backdrop-filter: blur(50px) !important;
|
||||
}
|
||||
.layout-desktop .headerLeft {
|
||||
padding: 2px !important;
|
||||
top: -3px !important;
|
||||
}
|
||||
.layout-desktop .pageTitle {
|
||||
z-index: 1099 !important;
|
||||
}
|
||||
508
CSS/css-scyfin/scyfin-theme-backdrop.css
Normal file
508
CSS/css-scyfin/scyfin-theme-backdrop.css
Normal file
@ -0,0 +1,508 @@
|
||||
/* Increase size of Jellyfin logo */
|
||||
.layout-desktop .pageTitleWithLogo {
|
||||
margin-left: 15px !important;
|
||||
height: 40px !important;
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Static left drawer */
|
||||
.layout-desktop .mainDrawer {
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
width: 250px !important;
|
||||
/* Modified background color */
|
||||
background-color: transparent !important;
|
||||
/* Move drawer behind header */
|
||||
z-index: 998 !important;
|
||||
}
|
||||
/* Lower drawer buttons */
|
||||
.layout-desktop .mainDrawer-scrollContainer {
|
||||
margin-top: 95px !important;
|
||||
}
|
||||
.layout-mobile .mainDrawer-scrollContainer {
|
||||
margin-top: 20px !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 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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Rounded cards */
|
||||
.cardContent,
|
||||
.cardPadder,
|
||||
.cardOverlayContainer,
|
||||
.blurhash-canvas,
|
||||
.dialog {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Floating progress bar */
|
||||
.innerCardFooter {
|
||||
bottom: 5% !important;
|
||||
width: 90% !important;
|
||||
margin: auto !important;
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
.itemProgressBar {
|
||||
height: 8px !important;
|
||||
}
|
||||
.innerCardFooterClear {
|
||||
background-color: black !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Green watched indicator */
|
||||
.playedIndicator {
|
||||
background: #409843 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Rounded left drawer buttons */
|
||||
.navMenuOption,
|
||||
.navMenuOption:hover,
|
||||
.navMenuOption-selected {
|
||||
border-radius: 100px !important;
|
||||
width: 85% !important;
|
||||
margin: auto !important;
|
||||
text-align: center !important;
|
||||
height: 45px !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 {
|
||||
position: inherit !important;
|
||||
left: -10% !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
/* Fix for header buttons */
|
||||
.layout-desktop .emby-button-foreground {
|
||||
top: -9px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Custom button color */
|
||||
.navMenuOption-selected {
|
||||
background: rgba(33, 149, 243, 0.2) !important;
|
||||
color: rgb(33, 149, 243) !important;
|
||||
backdrop-filter: blur(50px) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Transparent header bar */
|
||||
.skinHeader {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.layout-desktop .skinHeader {
|
||||
padding-top: 1.5em !important;
|
||||
}
|
||||
/* Rounded header buttons */
|
||||
.headerTabs,
|
||||
.headerRight {
|
||||
background-color:rgba(35, 35, 35, 0.5) !important;
|
||||
border-radius: 50px !important;
|
||||
backdrop-filter: blur(50px) !important;
|
||||
}
|
||||
.layout-desktop .headerTabs,
|
||||
.layout-desktop .headerRight {
|
||||
margin-left: 250px !important;
|
||||
margin-bottom: 10px !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;
|
||||
}
|
||||
/* Move left header back up */
|
||||
.layout-desktop .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;
|
||||
}
|
||||
.layout-mobile .emby-button-foreground {
|
||||
top: -2px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Settings and dashboard modifications */
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.paperList,
|
||||
.listItem:hover,
|
||||
.subtitleappearance-preview {
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
.button-submit,
|
||||
.emby-select,
|
||||
.checkboxOutline,
|
||||
.btnRefresh,
|
||||
#btnShutdown,
|
||||
.raised {
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
/* Modify username placement on profile page */
|
||||
.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 {
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
/* Rounded dashboard cards */
|
||||
.cardBox {
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
/* Removed ugliness of border-card styling */
|
||||
.layout-desktop fieldset.verticalSection-extrabottompadding {
|
||||
border-radius: 15px !important;
|
||||
border-color: #3B3B3B !important;
|
||||
padding: 10px 35px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Metadata editor fixes */
|
||||
.editPageSidebar {
|
||||
margin-left: 250px !important;
|
||||
width: 20% !important;
|
||||
}
|
||||
.layout-desktop #editItemMetadataPage {
|
||||
margin-left: 215px !important;
|
||||
}
|
||||
.jstree-default-large .jstree-node {
|
||||
line-height: 35px !important;
|
||||
}
|
||||
.jstree-default .jstree-wholerow-clicked {
|
||||
background: rgba(33, 149, 243, 0.2) !important;
|
||||
}
|
||||
.jstree-wholerow-hovered {
|
||||
background: rgba(35, 35, 35, 0.5) !important;
|
||||
}
|
||||
.jstree-children {
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
#editItemMetadataPage .btnHeaderSave {
|
||||
background: #00A4DC !important;
|
||||
border-radius: 100px !important;
|
||||
height: 40px !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Remove show/movie image on details page */
|
||||
.layout-desktop .detailImageContainer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Re-position content on details page */
|
||||
.layout-desktop .detailSection {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.layout-desktop .detailPageContent {
|
||||
padding-left: 4% !important;
|
||||
}
|
||||
|
||||
/* Re-position logo */
|
||||
.layout-desktop .detailLogo {
|
||||
right: 0 !important;
|
||||
left: 4% !important;
|
||||
top: 14vh !important;
|
||||
}
|
||||
|
||||
/* Transparent ribbon bar */
|
||||
.detailRibbon {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Add card around top-right buttons */
|
||||
.layout-desktop .mainDetailButtons {
|
||||
background: rgba(35, 35, 35, 0.5) !important;
|
||||
border-radius: 100px !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
.layout-mobile .mainDetailButtons {
|
||||
background: #181818 !important;
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
|
||||
/* Add card around groups section */
|
||||
.layout-desktop .detailsGroupItem {
|
||||
background: rgba(35, 35, 35, 0.5) !important;
|
||||
padding: 10px 20px !important;
|
||||
border-radius: 100px !important;
|
||||
width: fit-content !important;
|
||||
max-width: max-content !important;
|
||||
backdrop-filter: blur(40px) !important;
|
||||
}
|
||||
|
||||
/* Fix for groups section card */
|
||||
.layout-desktop .content.focuscontainer-x {
|
||||
white-space: nowrap !important;
|
||||
padding-right: 48px !important;
|
||||
}
|
||||
|
||||
/* Alternative mobile group section card */
|
||||
.layout-mobile .itemDetailsGroup {
|
||||
background: #181818 !important;
|
||||
padding: 15px 20px 5px 20px !important;
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
|
||||
/* Add card around description */
|
||||
.layout-desktop .detailSectionContent {
|
||||
background: rgba(35, 35, 35, 0.5) !important;
|
||||
border-radius: 15px !important;
|
||||
padding: 40px 20px 10px 20px !important;
|
||||
margin-top: 50px !important;
|
||||
backdrop-filter: blur(40px) !important;
|
||||
}
|
||||
.layout-mobile .detailSectionContent {
|
||||
background: #181818 !important;
|
||||
border-radius: 15px !important;
|
||||
padding: 10px 20px !important;
|
||||
}
|
||||
|
||||
/* Add card around track selection */
|
||||
.layout-desktop .trackSelections {
|
||||
background: rgba(35, 35, 35, 0.5) !important;
|
||||
border-radius: 15px !important;
|
||||
padding: 10px 20px !important;
|
||||
margin-top: 20px !important;
|
||||
backdrop-filter: blur(40px) !important;
|
||||
}
|
||||
.layout-mobile .trackSelections {
|
||||
background: #181818 !important;
|
||||
border-radius: 15px !important;
|
||||
padding: 10px 20px !important;
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
/* Fix for track select dropdowns */
|
||||
.trackSelections .selectContainer .detailTrackSelect {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* Re-position title */
|
||||
.layout-desktop .infoWrapper {
|
||||
margin-top: 245px !important;
|
||||
}
|
||||
.layout-desktop .detailPagePrimaryContainer {
|
||||
padding-left: 4% !important;
|
||||
}
|
||||
.layout-desktop .nameContainer {
|
||||
position: absolute !important;
|
||||
margin-top: -55px !important;
|
||||
}
|
||||
.layout-desktop .itemMiscInfo {
|
||||
position: absolute !important;
|
||||
margin-left: 21px !important;
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
|
||||
/* Move track selection box */
|
||||
.detailSection {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: box;
|
||||
-webkit-box-orient: vertical;
|
||||
-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;
|
||||
}
|
||||
/* Fix for backdrops */
|
||||
.layout-desktop #itemBackdrop {
|
||||
display: none !important;
|
||||
}
|
||||
.layout-desktop .detailPageWrapperContainer {
|
||||
padding-top: 20% !important;
|
||||
}
|
||||
/* Move episode title */
|
||||
.layout-desktop .nameContainer {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: box;
|
||||
-webkit-box-orient: horizontal;
|
||||
-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;
|
||||
margin: 0.45em 0 0 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Live TV */
|
||||
/* Modified background color of active guide cells */
|
||||
.programCell-active {
|
||||
background: #181818 !important;
|
||||
}
|
||||
/* Translucent buttons */
|
||||
.raised.emby-button:not(.button-submit) {
|
||||
background: rgba(35, 35, 35, 0.5) !important;
|
||||
backdrop-filter: blur(40px) !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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Player modifications */
|
||||
.upNextContainer, .toastVisible, .sliderBubble {
|
||||
backdrop-filter: blur(50px) !important;
|
||||
}
|
||||
.upNextContainer {
|
||||
border-radius: 15px !important;
|
||||
background-color: rgba(0, 0, 0, 0.7) !important;
|
||||
}
|
||||
.toastVisible {
|
||||
border-radius: 30px !important;
|
||||
background-color: rgba(35, 35, 35, 0.5) !important;
|
||||
}
|
||||
.sliderBubble {
|
||||
border-radius: 15px !important;
|
||||
background-color: rgba(0,0,0,0.5) !important;
|
||||
height: 55px !important
|
||||
}
|
||||
/* Support for Jellyscrub plugin */
|
||||
.chapterThumbContainer {
|
||||
margin-bottom: 135px !important;
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Fix for scaling issues */
|
||||
@media (width: 1600px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
493
CSS/css-scyfin/scyfin-theme.css
Normal file
493
CSS/css-scyfin/scyfin-theme.css
Normal file
@ -0,0 +1,493 @@
|
||||
/* Increase size of Jellyfin logo */
|
||||
.layout-desktop .pageTitleWithLogo {
|
||||
margin-left: 15px !important;
|
||||
height: 40px !important;
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Static left drawer */
|
||||
.layout-desktop .mainDrawer {
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
width: 250px !important;
|
||||
/* Modified background color */
|
||||
background-color: #181818 !important;
|
||||
/* Added border to right side */
|
||||
border-right: 1px solid #3B3B3B !important;
|
||||
/* Move drawer behind header */
|
||||
z-index: 998 !important;
|
||||
}
|
||||
/* Lower drawer buttons */
|
||||
.layout-desktop .mainDrawer-scrollContainer {
|
||||
margin-top: 95px !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 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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Rounded cards */
|
||||
.cardContent,
|
||||
.cardPadder,
|
||||
.cardOverlayContainer,
|
||||
.blurhash-canvas,
|
||||
.dialog {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Floating progress bar */
|
||||
.innerCardFooter {
|
||||
bottom: 5% !important;
|
||||
width: 90% !important;
|
||||
margin: auto !important;
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
.itemProgressBar {
|
||||
height: 8px !important;
|
||||
}
|
||||
.innerCardFooterClear {
|
||||
background-color: black !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Green watched indicator */
|
||||
.playedIndicator {
|
||||
background: #409843 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Rounded left drawer buttons */
|
||||
.navMenuOption,
|
||||
.navMenuOption:hover,
|
||||
.navMenuOption-selected {
|
||||
border-radius: 100px !important;
|
||||
width: 85% !important;
|
||||
margin: auto !important;
|
||||
text-align: center !important;
|
||||
height: 45px !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 {
|
||||
position: inherit !important;
|
||||
left: -10% !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
/* Fix for header buttons */
|
||||
.layout-desktop .emby-button-foreground {
|
||||
top: -9px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Custom button color */
|
||||
.navMenuOption-selected {
|
||||
background: rgba(33, 149, 243, 0.2) !important;
|
||||
color: rgb(33, 149, 243) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Modified background color */
|
||||
.backgroundContainer,
|
||||
.dialog,
|
||||
html {
|
||||
background-color: #0F0F0F !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Transparent header bar */
|
||||
.skinHeader {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.layout-desktop .skinHeader {
|
||||
padding-top: 1.5em !important;
|
||||
}
|
||||
/* Rounded header buttons */
|
||||
.headerTabs,
|
||||
.headerRight {
|
||||
background-color:rgba(35, 35, 35, 0.5) !important;
|
||||
border-radius: 50px !important;
|
||||
backdrop-filter: blur(50px) !important;
|
||||
}
|
||||
.layout-desktop .headerTabs,
|
||||
.layout-desktop .headerRight {
|
||||
margin-left: 250px !important;
|
||||
margin-bottom: 10px !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;
|
||||
}
|
||||
/* Move left header back up */
|
||||
.layout-desktop .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;
|
||||
}
|
||||
.layout-mobile .emby-button-foreground {
|
||||
top: -2px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Player modifications */
|
||||
.upNextContainer, .toastVisible, .sliderBubble {
|
||||
backdrop-filter: blur(50px) !important;
|
||||
}
|
||||
.upNextContainer {
|
||||
border-radius: 15px !important;
|
||||
background-color: rgba(0, 0, 0, 0.7) !important;
|
||||
}
|
||||
.toastVisible {
|
||||
border-radius: 30px !important;
|
||||
background-color: rgba(35, 35, 35, 0.5) !important;
|
||||
}
|
||||
.sliderBubble {
|
||||
border-radius: 15px !important;
|
||||
background-color: rgba(0,0,0,0.5) !important;
|
||||
height: 55px !important
|
||||
}
|
||||
/* Support for Jellyscrub plugin */
|
||||
.chapterThumbContainer {
|
||||
margin-bottom: 135px !important;
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Settings and dashboard modifications */
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.paperList,
|
||||
.listItem:hover,
|
||||
.subtitleappearance-preview {
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
.button-submit,
|
||||
.emby-select,
|
||||
.checkboxOutline,
|
||||
.btnRefresh,
|
||||
#btnShutdown,
|
||||
.raised {
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
/* Modify username placement on profile page */
|
||||
.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 {
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
/* Rounded dashboard cards */
|
||||
.cardBox {
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
/* Removed ugliness of border-card styling */
|
||||
.layout-desktop fieldset.verticalSection-extrabottompadding {
|
||||
border-radius: 15px !important;
|
||||
border-color: #3B3B3B !important;
|
||||
padding: 10px 35px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Metadata editor fixes */
|
||||
.editPageSidebar {
|
||||
margin-left: 250px !important;
|
||||
width: 20% !important;
|
||||
}
|
||||
.layout-desktop #editItemMetadataPage {
|
||||
margin-left: 215px !important;
|
||||
}
|
||||
.jstree-default-large .jstree-node {
|
||||
line-height: 35px !important;
|
||||
}
|
||||
.jstree-default .jstree-wholerow-clicked {
|
||||
background: rgba(33, 149, 243, 0.2) !important;
|
||||
}
|
||||
.jstree-wholerow-hovered {
|
||||
background: rgba(35, 35, 35, 0.5) !important;
|
||||
}
|
||||
.jstree-children {
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
#editItemMetadataPage .btnHeaderSave {
|
||||
background: #00A4DC !important;
|
||||
border-radius: 100px !important;
|
||||
height: 40px !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Remove show/movie image on details page */
|
||||
.layout-desktop .detailImageContainer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Re-position content on details page */
|
||||
.layout-desktop .detailSection {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.layout-desktop .detailPageContent {
|
||||
padding-left: 4% !important;
|
||||
}
|
||||
|
||||
/* Re-position logo */
|
||||
.layout-desktop .detailLogo {
|
||||
right: 0 !important;
|
||||
left: 4% !important;
|
||||
top: 14vh !important;
|
||||
}
|
||||
|
||||
/* Transparent ribbon bar */
|
||||
.detailRibbon {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Add card around top-right buttons */
|
||||
.mainDetailButtons {
|
||||
background: rgba(35, 35, 35, 0.5) !important;
|
||||
border-radius: 100px !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
|
||||
/* Add card around groups section */
|
||||
.layout-desktop .detailsGroupItem {
|
||||
background: #181818 !important;
|
||||
padding: 10px 20px !important;
|
||||
border-radius: 100px !important;
|
||||
width: fit-content !important;
|
||||
max-width: max-content !important;
|
||||
}
|
||||
|
||||
/* Fix for groups section card */
|
||||
.layout-desktop .content.focuscontainer-x {
|
||||
white-space: nowrap !important;
|
||||
padding-right: 48px !important;
|
||||
}
|
||||
|
||||
/* Alternative mobile group section card */
|
||||
.layout-mobile .itemDetailsGroup {
|
||||
background: #181818 !important;
|
||||
padding: 15px 20px 5px 20px !important;
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
|
||||
/* Add card around description */
|
||||
.layout-desktop .detailSectionContent {
|
||||
background: #181818 !important;
|
||||
border-radius: 15px !important;
|
||||
padding: 40px 20px 10px 20px !important;
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
.layout-mobile .detailSectionContent {
|
||||
background: #181818 !important;
|
||||
border-radius: 15px !important;
|
||||
padding: 10px 20px !important;
|
||||
}
|
||||
|
||||
/* Add card around track selection */
|
||||
.trackSelections {
|
||||
background: #181818 !important;
|
||||
border-radius: 15px !important;
|
||||
padding: 10px 20px !important;
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
/* Fix for track select dropdowns */
|
||||
.trackSelections .selectContainer .detailTrackSelect {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* Re-position title */
|
||||
.layout-desktop .infoWrapper {
|
||||
margin-top: 245px !important;
|
||||
}
|
||||
.layout-desktop .detailPagePrimaryContainer {
|
||||
padding-left: 4% !important;
|
||||
}
|
||||
.layout-desktop .nameContainer {
|
||||
position: absolute !important;
|
||||
margin-top: -55px !important;
|
||||
}
|
||||
.layout-desktop .itemMiscInfo {
|
||||
position: absolute !important;
|
||||
margin-left: 21px !important;
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
|
||||
/* Move track selection box */
|
||||
.detailSection {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: box;
|
||||
-webkit-box-orient: vertical;
|
||||
-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;
|
||||
display: -moz-box;
|
||||
display: box;
|
||||
-webkit-box-orient: horizontal;
|
||||
-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;
|
||||
margin: 0.45em 0 0 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Live TV */
|
||||
/* Modified background color of active guide cells */
|
||||
.programCell-active {
|
||||
background: #181818 !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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Fix for scaling issues */
|
||||
@media (width: 1600px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@ -1,118 +0,0 @@
|
||||
/* Reset size of Jellyfin logo */
|
||||
.layout-desktop .pageTitleWithLogo {
|
||||
height: 30px !important;
|
||||
width: 100px !important;
|
||||
margin: 0 1em 0 .5em !important;
|
||||
}
|
||||
[dir="ltr"] .pageTitle {
|
||||
margin: 0 1em 0 .5em !important;
|
||||
}
|
||||
|
||||
/* Un-static left drawer */
|
||||
.layout-desktop .mainDrawer:not(.dashboardDocument) {
|
||||
left: -320px !important;
|
||||
z-index: 1099 !important;
|
||||
border-top-right-radius : var(--rounded-cards) !important;
|
||||
border-bottom-right-radius : var(--rounded-cards) !important;
|
||||
background: var(--secondary-background-color) !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
.layout-desktop:has(.backgroundContainer.withBackdrop) .mainDrawer:not(.dashboardDocument) {
|
||||
width: 275px !important;
|
||||
background-color: var(--primary-background-transparent) !important;
|
||||
backdrop-filter: blur(var(--blur)) !important;
|
||||
}
|
||||
@supports not selector(:has(*)) {
|
||||
.layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer {
|
||||
background: var(--secondary-background-color) !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
.layout-desktop #itemDetailPage.noBackdropTransparency::after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Lower drawer buttons */
|
||||
.layout-desktop .mainDrawer-scrollContainer {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
|
||||
/* Shift content back to the left */
|
||||
.layout-desktop .libraryPage:not(#editItemMetadataPage) {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
/* Fix for Jellyfin Media Player */
|
||||
.quickConnectSettingsContainer {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
/* Add transition back */
|
||||
.layout-desktop .touch-menu-la.transition {
|
||||
transition: transform .24s ease-out,left .26s ease-out,-webkit-transform .24s ease-out !important;
|
||||
}
|
||||
|
||||
/* Show hamburger button */
|
||||
.layout-desktop body:not(.hideMainDrawer) .mainDrawerButton:not(.dashboardDocument) {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
/* Fix for dashboard */
|
||||
.layout-desktop .dashboardDocument .mainDrawer {
|
||||
top: 0px !important;
|
||||
left: 0px !important;
|
||||
width: 300px !important;
|
||||
z-index: 998 !important;
|
||||
}
|
||||
.layout-desktop .dashboardDocument .mainDrawer-scrollContainer {
|
||||
padding-top: 75px !important;
|
||||
}
|
||||
|
||||
/* Re-center header buttons */
|
||||
.layout-desktop .headerTabs {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
/* Re-enable home button */
|
||||
.layout-desktop body:not(.hideMainDrawer) .skinHeader:not(.noHomeButtonHeader) .headerHomeButton {
|
||||
display: block !important;
|
||||
}
|
||||
.layout-desktop body:not(.hideMainDrawer) .dashboardDocument .headerHomeButton {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Fix for scroll menus on home page */
|
||||
.emby-scroller {
|
||||
margin-right: 3.3% !important;
|
||||
}
|
||||
|
||||
/* Background for top left buttons */
|
||||
.layout-desktop body:not(.hideMainDrawer) .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
|
||||
padding: 2px !important;
|
||||
top: -3px !important;
|
||||
background-color: var(--primary-background-transparent) !important;
|
||||
border-radius: 50px !important;
|
||||
backdrop-filter: blur(var(--blur)) !important;
|
||||
}
|
||||
/* Fix for JMP */
|
||||
@supports not selector(:has(*)) {
|
||||
.layout-desktop body:not(.hideMainDrawer) .headerLeft {
|
||||
padding: 2px !important;
|
||||
top: -3px !important;
|
||||
background-color: var(--primary-background-transparent) !important;
|
||||
border-radius: 50px !important;
|
||||
backdrop-filter: blur(var(--blur)) !important;
|
||||
}
|
||||
}
|
||||
.headerLeft {
|
||||
flex-grow: 0 !important;
|
||||
-webkit-flex-grow: 0 !important;
|
||||
}
|
||||
.headerRight {
|
||||
position: absolute !important;
|
||||
right: 12px !important;
|
||||
}
|
||||
|
||||
/* Music Player */
|
||||
.layout-desktop .appfooter {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
8
CSS/rounded-cards.css
Normal file
8
CSS/rounded-cards.css
Normal file
@ -0,0 +1,8 @@
|
||||
/* Rounded cards */
|
||||
.cardContent,
|
||||
.cardPadder,
|
||||
.cardOverlayContainer,
|
||||
.blurhash-canvas,
|
||||
.dialog {
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
20
CSS/rounded-drawer-buttons.css
Normal file
20
CSS/rounded-drawer-buttons.css
Normal file
@ -0,0 +1,20 @@
|
||||
/* Rounded buttons */
|
||||
.navMenuOption,
|
||||
.navMenuOption:hover,
|
||||
.navMenuOption-selected {
|
||||
border-radius: 100px !important;
|
||||
width: 85% !important;
|
||||
margin: auto !important;
|
||||
|
||||
/* Modify button height (optional)
|
||||
height: 45px !important;
|
||||
*/
|
||||
}
|
||||
|
||||
/* Center content vertically and shift to the left */
|
||||
.navMenuOptionIcon,
|
||||
.navMenuOptionText {
|
||||
position: inherit !important;
|
||||
left: -7% !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
1300
CSS/scyfin-theme.css
1300
CSS/scyfin-theme.css
File diff suppressed because it is too large
Load Diff
37
CSS/static-left-drawer.css
Normal file
37
CSS/static-left-drawer.css
Normal file
@ -0,0 +1,37 @@
|
||||
/* Static left drawer */
|
||||
.layout-desktop .mainDrawer {
|
||||
transform: none !important;
|
||||
left: 0 !important;
|
||||
top: 65px !important;
|
||||
width: 250px !important;
|
||||
}
|
||||
|
||||
/* Shift content to the right */
|
||||
.layout-desktop .libraryPage {
|
||||
margin-left: 225px !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 height */
|
||||
.layout-desktop .dashboardDocument .mainDrawer {
|
||||
top: 0px !important;
|
||||
}
|
||||
|
||||
/* Re-center header buttons */
|
||||
.layout-desktop .headerTabs {
|
||||
margin-left: 250px !important;
|
||||
}
|
||||
/* Fix for video player and login page */
|
||||
.layout-desktop .hide-scroll .mainDrawer,
|
||||
.layout-desktop .hideMainDrawer .mainDrawer {
|
||||
left: -320px !important;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
:root {
|
||||
--primary-r: 234;
|
||||
--primary-g: 112;
|
||||
--primary-b: 112;
|
||||
--primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
|
||||
--secondary-accent-color: rgba(234, 112, 112, 0.2);
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
/* Variables */
|
||||
:root {
|
||||
--primary-background-color: #000;
|
||||
--secondary-background-color: #101010;
|
||||
--tertiary-background-color: #181818;
|
||||
--outline-color: #252525;
|
||||
--primary-background-transparent: rgba(35,35,35,0.5);
|
||||
--secondary-background-transparent: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
.fab,
|
||||
.raised,
|
||||
.collapseContent,
|
||||
.formDialogFooter:not(.formDialogFooter-clear),
|
||||
.formDialogHeader:not(.formDialogHeader-clear),
|
||||
.paperList,
|
||||
.visualCardBox {
|
||||
background: var(--secondary-background-color) !important;
|
||||
}
|
||||
|
||||
.checkboxList.paperList {
|
||||
background: var(--primary-background-color) !important;
|
||||
border: 2px solid var(--outline-color) !important;
|
||||
}
|
||||
|
||||
.MuiPaper-root.MuiPopover-paper {
|
||||
background: var(--tertiary-background-color) !important;
|
||||
}
|
||||
|
||||
.button-submit {
|
||||
background: var(--secondary-accent-color) !important;
|
||||
color: var(--primary-accent-color) !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked + span + .checkboxOutline {
|
||||
background: var(--secondary-accent-color) !important;
|
||||
border-color: var(--secondary-accent-color) !important;
|
||||
}
|
||||
.checkboxIcon {
|
||||
color: var(--primary-accent-color)
|
||||
}
|
||||
|
||||
.layout-desktop .detailSectionContent,
|
||||
.trackSelections,
|
||||
.layout-desktop .detailsGroupItem,
|
||||
.layout-desktop .localnav {
|
||||
background: var(--primary-background-color) !important;
|
||||
border: 2px solid var(--outline-color) !important;
|
||||
}
|
||||
|
||||
.listItem:hover {
|
||||
background: var(--secondary-background-color) !important;
|
||||
}
|
||||
|
||||
select,
|
||||
textarea,
|
||||
input:not(.mdl-slider) {
|
||||
background: var(--primary-background-color) !important;
|
||||
border: 2px solid var(--outline-color) !important;
|
||||
}
|
||||
|
||||
.navMenuOption:hover:not(.navMenuOption-selected) {
|
||||
background: var(--tertiary-background-color) !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
|
||||
border-color: var(--secondary-accent-color) !important;
|
||||
}
|
||||
.checkboxOutline {
|
||||
border-color: var(--outline-color) !important;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
:root {
|
||||
--primary-r: 147;
|
||||
--primary-g: 215;
|
||||
--primary-b: 182;
|
||||
--primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
|
||||
--secondary-accent-color: #93D7B620;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
:root {
|
||||
--primary-r: 232;
|
||||
--primary-g: 236;
|
||||
--primary-b: 239;
|
||||
--primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
|
||||
--secondary-accent-color: rgba(232, 236, 239, 0.2);
|
||||
|
||||
/* Alternate accents*/
|
||||
--primary-alt1: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.85);
|
||||
--primary-alt2: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.7);
|
||||
--primary-alt3: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.55);
|
||||
--primary-alt4: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.4);
|
||||
--primary-alt5: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.25);
|
||||
}
|
||||
|
||||
.layout-desktop .button-submit,
|
||||
.layout-desktop .checkboxIcon,
|
||||
.layout-desktop .countIndicator {
|
||||
color: var(--secondary-background-color) !important;
|
||||
}
|
||||
|
||||
#skipIntro .emby-button:hover {
|
||||
color: #000 !important;
|
||||
}
|
||||
79
CSS/transparent-header.css
Normal file
79
CSS/transparent-header.css
Normal file
@ -0,0 +1,79 @@
|
||||
/* Transparent header bar */
|
||||
.skinHeader {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Rounded header buttons */
|
||||
.headerTabs,
|
||||
.headerRight {
|
||||
background-color:rgba(35, 35, 35, 0.5) !important;
|
||||
border-radius: 50px !important;
|
||||
backdrop-filter: blur(50px) !important;
|
||||
}
|
||||
|
||||
/* Lower header and add padding to right buttons */
|
||||
.layout-desktop .headerRight {
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
/* Header size */
|
||||
.layout-desktop .headerTabs {
|
||||
height: 52px !important;
|
||||
top: 1px !important;
|
||||
}
|
||||
.layout-mobile .headerTabs {
|
||||
height: 45px !important;
|
||||
}
|
||||
|
||||
/* Center text */
|
||||
.emby-button-foreground {
|
||||
top: -6px !important;
|
||||
}
|
||||
|
||||
/* Mobile fixes */
|
||||
.layout-mobile .headroom--unpinned {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.layout-mobile .sectionTabs {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
width: auto !important;
|
||||
}
|
||||
.layout-mobile .emby-button-foreground {
|
||||
top: -2px !important;
|
||||
}
|
||||
|
||||
/* Fix for scaling issues */
|
||||
@media (width: 1600px) {
|
||||
.layout-desktop .headerRight {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.layout-desktop .headerTabs {
|
||||
top: -7px !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1600px) {
|
||||
.layout-desktop .emby-button-foreground {
|
||||
top: -1px !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;
|
||||
}
|
||||
}
|
||||
@media (max-width: 100em) {
|
||||
.withSectionTabs .headerTop {
|
||||
padding-bottom: 1em !important;
|
||||
}
|
||||
}
|
||||
102
README.md
102
README.md
@ -1,89 +1,41 @@
|
||||
<img src="./images/scyfin-full.png" alt="scyfin logo" width="200"/>
|
||||
|
||||
### **Modern CSS theme for Jellyfin with support for backdrops and custom accent colors**
|
||||
|
||||
[Go to installation](#installation)
|
||||
<img src="./images/scyfin-full.svg" alt="scyfin logo" width="200"/>
|
||||
|
||||
---
|
||||
|
||||
### **Scyfin Base Theme**
|
||||
```
|
||||
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
|
||||
```
|
||||
|
||||
<img src="./images/homepage.png" alt="homepage" width="100%"/>
|
||||
<img src="./images/homepage-backdrops.png" alt="homepage-backdrops" width="100%"/>
|
||||
<img src="./images/details.png" alt="details" width="100%"/>
|
||||
<img src="./images/details-backdrops.png" alt="details-backdrops" width="100%"/>
|
||||
<img src="./images/movies.png" alt="movies" width="100%"/>
|
||||
<img src="./images/login.png" alt="login" width="100%"/>
|
||||
Custom CSS theme for Jellyfin (plus a backdrops supported version)
|
||||
|
||||
---
|
||||
|
||||
### **Options (Add these below the base theme)**
|
||||
### Disable static left drawer
|
||||
```
|
||||
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
|
||||
```
|
||||
Scyfin Complete Theme
|
||||
|
||||
<img src="./images/scyfin/scyfin1.png" alt="scyfin1" width="80%"/>
|
||||
<img src="./images/scyfin/scyfin2.png" alt="scyfin2" width="80%"/>
|
||||
<img src="./images/scyfin/scyfin3.jpg" alt="scyfin3" width="80%"/>
|
||||
<img src="./images/scyfin/scyfin4.png" alt="scyfin4" width="80%"/>
|
||||
<img src="./images/scyfin/scyfin5.png" alt="scyfin5" width="80%"/>
|
||||
|
||||
`@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.9/CSS/css-scyfin/scyfin-theme.css');`
|
||||
|
||||
Options (Add these below the full theme)
|
||||
- Disable static left drawer `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.9/CSS/css-scyfin/disable-static-drawer.css');`
|
||||
- Disable static left drawer (BACKDROP VERSION) `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.9/CSS/css-scyfin/disable-static-drawer-backdrop.css');`
|
||||
|
||||
---
|
||||
|
||||
### **Themes:**
|
||||
### Seafoam
|
||||
```
|
||||
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-seafoam.css');
|
||||
```
|
||||
<img src="./images/seafoam.png" alt="seafoam-theme" width="40%"/>
|
||||
Scyfin Complete Theme - Backdrops Supported
|
||||
|
||||
### Coral
|
||||
```
|
||||
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-coral.css');
|
||||
```
|
||||
<img src="./images/coral.png" alt="coral-theme" width="40%"/>
|
||||
Note -
|
||||
|
||||
### Snow
|
||||
```
|
||||
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
|
||||
```
|
||||
<img src="./images/snow.png" alt="snow-theme" width="40%"/>
|
||||
Only add 1 version of the theme, do not add both the normal Scyfin theme and the backdrops supported version together
|
||||
|
||||
Backdrops need to be enabled in Jellyfin (Settings > Display > Backdrops) for backdrop supported version to display properly
|
||||
|
||||
### OLED
|
||||
```
|
||||
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-oled.css');
|
||||
```
|
||||
<img src="./images/homepage-oled.png" alt="homepage-oled" width="90%"/>
|
||||
<img src="./images/details-oled.png" alt="details-oled" width="90%"/>
|
||||
<img src="./images/scyfin/scyfin-backdrop1.jpg" alt="scyfin-backdrop1" width="80%"/>
|
||||
<img src="./images/scyfin/scyfin-backdrop2.png" alt="scyfin-backdrop2" width="80%"/>
|
||||
<img src="./images/scyfin/scyfin-backdrop3.jpg" alt="scyfin-backdrop3" width="80%"/>
|
||||
|
||||
---
|
||||
`@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.9/CSS/css-scyfin/scyfin-theme-backdrop.css');`
|
||||
|
||||
### **Installation:**
|
||||
|
||||
---
|
||||
|
||||
**Server-wide install:**
|
||||
* Click the hamburger icon (Top left)
|
||||
* Navigate to "Dashboard" (If you don't see this, make sure you are signed in to your admin account)
|
||||
* Navigate to "Branding"
|
||||
* Near the bottom, under "Custom CSS code", paste the `@import url` for the base Scyfin theme
|
||||
* Example:
|
||||
* <img src="./images/install-server-base.png" alt="install-server-base" width="80%"/>
|
||||
* Optional - Paste the `@import url` for any options / themes you may want
|
||||
* Example:
|
||||
* <img src="./images/install-server-options.png" alt="install-server-options" width="80%"/>
|
||||
* Click "Save"
|
||||
|
||||
---
|
||||
|
||||
**Single client install:**
|
||||
* Click the hamburger icon (Top left)
|
||||
* Navigate to "Settings"
|
||||
* Navigate to "Display"
|
||||
* Near the middle, under "Custom CSS code", paste the `@import url` for the base Scyfin theme
|
||||
* Note -
|
||||
* If there is any server-wide custom CSS, you may want to enable "Disable server-provided custom CSS code", as the two themes WILL interfere with each other
|
||||
* Example:
|
||||
* <img src="./images/install-client-base.png" alt="install-client-base" width="80%"/>
|
||||
* Optional - Paste the `@import url` for any options / themes you may want
|
||||
* Example:
|
||||
* <img src="./images/install-client-options.png" alt="install-client-options" width="80%"/>
|
||||
* Click "Save"
|
||||
Options (Add these below the full theme)
|
||||
- Disable static left drawer `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.9/CSS/css-scyfin/disable-static-drawer.css');`
|
||||
- Disable static left drawer (BACKDROP VERSION) `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.9/CSS/css-scyfin/disable-static-drawer-backdrop.css');`
|
||||
|
||||
BIN
images/borken.png
Normal file
BIN
images/borken.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 311 KiB |
BIN
images/borken2.png
Normal file
BIN
images/borken2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
images/coral.png
BIN
images/coral.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 349 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1004 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
BIN
images/login.png
BIN
images/login.png
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
BIN
images/rounded-cards-demo.png
Normal file
BIN
images/rounded-cards-demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
images/rounded-drawer-buttons-demo.png
Normal file
BIN
images/rounded-drawer-buttons-demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
images/scyfin/scyfin-backdrop1.jpg
Normal file
BIN
images/scyfin/scyfin-backdrop1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
BIN
images/scyfin/scyfin-backdrop2.png
Normal file
BIN
images/scyfin/scyfin-backdrop2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
images/scyfin/scyfin-backdrop3.jpg
Normal file
BIN
images/scyfin/scyfin-backdrop3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 481 KiB |
BIN
images/scyfin/scyfin1.png
Normal file
BIN
images/scyfin/scyfin1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
images/scyfin/scyfin2.png
Normal file
BIN
images/scyfin/scyfin2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
images/scyfin/scyfin3.jpg
Normal file
BIN
images/scyfin/scyfin3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 421 KiB |
BIN
images/scyfin/scyfin4.png
Normal file
BIN
images/scyfin/scyfin4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
images/scyfin/scyfin5.png
Normal file
BIN
images/scyfin/scyfin5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
BIN
images/snow.png
BIN
images/snow.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
BIN
images/static-left-drawer-demo.png
Normal file
BIN
images/static-left-drawer-demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
images/transparent-header-alt-demo.png
Normal file
BIN
images/transparent-header-alt-demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
images/transparent-header-demo.png
Normal file
BIN
images/transparent-header-demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Loading…
Reference in New Issue
Block a user