mirror of
https://github.com/loof2736/scyfin.git
synced 2025-11-03 16:08:53 +01:00
Compare commits
69 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
d69ca9a5c5 | ||
|
|
15baa1ba63 | ||
|
|
b5f2fee628 | ||
|
|
a6963bb1b5 | ||
|
caf1875ecb | ||
|
|
d43d697a15 | ||
|
|
d9b6ecc0a5 | ||
|
|
dcfea25d62 | ||
|
|
5fff995570 | ||
|
|
a587163d43 | ||
|
|
0d6f173b43 | ||
|
|
e49cb8308c | ||
|
|
24a5320302 | ||
|
|
abe98d6d59 | ||
|
|
00363ff09f | ||
|
|
f7ae6d2dab | ||
|
|
569894124c | ||
|
|
dfbffb40c5 | ||
|
|
940c08f9c5 | ||
|
|
51ca34070e | ||
|
|
11fd7f77df | ||
|
|
2522bb8723 | ||
|
|
d041906f55 | ||
|
|
a5d4ab2214 | ||
|
|
f09b19998c | ||
|
|
1f055e932c | ||
|
|
a430a08030 | ||
|
|
40db1a491b | ||
|
|
bddcc14032 | ||
|
|
103aeb7e64 | ||
|
|
132dedb72f | ||
|
|
c3fe2b36a5 | ||
|
|
1162f1f188 | ||
|
|
3f5e3559f1 | ||
|
|
567cae1542 | ||
|
|
9d63e455a7 | ||
|
|
93ed9e284e | ||
|
|
5c51f50ebc | ||
|
|
00e9f9102a | ||
|
|
909200962d | ||
|
|
a4419977f7 | ||
|
|
d07f74653e | ||
|
|
aa875f2ceb | ||
|
|
b4b9a24aba | ||
|
|
c59dd9d0af | ||
|
|
884d0c7f61 | ||
|
|
43c5b44ff7 | ||
|
|
9afe7a516f | ||
|
|
5ebfe4df07 | ||
|
|
0ff4cc37aa | ||
|
|
0f962980d4 | ||
|
|
f0d53f0a0c | ||
|
|
6e0f638efd | ||
|
|
2279074cbd | ||
|
|
49ed4b65d2 | ||
|
|
28710d0f04 | ||
|
|
260a4bc6d4 | ||
|
|
38239e99aa | ||
|
|
c91f39b38a | ||
|
|
6c9cdbefef | ||
|
|
d22dc84677 | ||
|
|
f5a395b044 | ||
|
|
1f94534ce9 | ||
|
|
7c5832bfd2 | ||
|
|
436fd9db15 | ||
|
|
01ab6af1fe | ||
|
|
ec67a5d2a3 | ||
|
|
a66c990eb3 | ||
|
|
9c5c65b1c9 |
@ -1,116 +0,0 @@
|
||||
/* Reset size of Jellyfin logo */
|
||||
.layout-desktop .pageTitleWithLogo {
|
||||
height: 30px !important;
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
/* Un-static left drawer */
|
||||
.layout-desktop .mainDrawer:not(.dashboardDocument) {
|
||||
left: -345px !important;
|
||||
width: 275px !important;
|
||||
/* Move drawer behind header */
|
||||
z-index: 1099 !important;
|
||||
/* Modified background color */
|
||||
background-color: var(--main-background-transparent) !important;
|
||||
border-radius: var(--rounded-cards) !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) {
|
||||
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 top left buttons */
|
||||
.layout-desktop .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
|
||||
padding: 2px 15px 2px 2px !important;
|
||||
top: -3px !important;
|
||||
background-color: var(--main-background-transparent) !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 .pageTitle {
|
||||
z-index: 1099 !important;
|
||||
}
|
||||
|
||||
@media (width: 1600px) {
|
||||
.layout-desktop:not(.transparentDocument) .headerLeft::before {
|
||||
top: 35px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1599px) {
|
||||
.layout-desktop:not(.transparentDocument) .headerLeft::before {
|
||||
top: 35px;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Music Player */
|
||||
.layout-desktop .appfooter {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
@ -2,15 +2,34 @@
|
||||
.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;
|
||||
/* Move drawer behind header */
|
||||
z-index: 1099 !important;
|
||||
background-color: var(--secondary-background-color) !important;
|
||||
border-radius: var(--rounded-cards) !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 */
|
||||
@ -33,7 +52,7 @@
|
||||
}
|
||||
|
||||
/* Show hamburger button */
|
||||
.layout-desktop .mainDrawerButton:not(.dashboardDocument) {
|
||||
.layout-desktop body:not(.hideMainDrawer) .mainDrawerButton:not(.dashboardDocument) {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
@ -53,11 +72,11 @@
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
/* Hide home button */
|
||||
.layout-desktop .headerHomeButton {
|
||||
/* Re-enable home button */
|
||||
.layout-desktop body:not(.hideMainDrawer) .skinHeader:not(.noHomeButtonHeader) .headerHomeButton {
|
||||
display: block !important;
|
||||
}
|
||||
.layout-desktop .dashboardDocument .headerHomeButton {
|
||||
.layout-desktop body:not(.hideMainDrawer) .dashboardDocument .headerHomeButton {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@ -67,12 +86,22 @@
|
||||
}
|
||||
|
||||
/* Background for top left buttons */
|
||||
.layout-desktop .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
|
||||
padding: 2px 15px 2px 2px !important;
|
||||
.layout-desktop body:not(.hideMainDrawer) .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
|
||||
padding: 2px !important;
|
||||
top: -3px !important;
|
||||
background-color: var(--main-background-transparent) !important;
|
||||
background-color: var(--primary-background-transparent) !important;
|
||||
border-radius: 50px !important;
|
||||
backdrop-filter: blur(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;
|
||||
@ -83,29 +112,6 @@
|
||||
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 .pageTitle {
|
||||
z-index: 1099 !important;
|
||||
}
|
||||
|
||||
@media (width: 1600px) {
|
||||
.layout-desktop:not(.transparentDocument) .headerLeft::before {
|
||||
top: 35px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1599px) {
|
||||
.layout-desktop:not(.transparentDocument) .headerLeft::before {
|
||||
top: 35px;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Music Player */
|
||||
.layout-desktop .appfooter {
|
||||
margin-left: 0px !important;
|
||||
|
||||
@ -1,890 +0,0 @@
|
||||
/* Variables */
|
||||
:root {
|
||||
--main-accent-color: #00a4dc;
|
||||
--secondary-accent-color: #00a4dc20;
|
||||
--main-background-color: #0F0F0F;
|
||||
--secondary-background-color: #181818;
|
||||
--main-background-transparent: rgba(35,35,35,0.5);
|
||||
--secondary-background-transparent: rgba(0,0,0,0.6);
|
||||
--rounded-cards: 15px;
|
||||
}
|
||||
|
||||
/* Setting accent color variable */
|
||||
.listItemIcon:not(.listItemIcon-transparent):not(.notification_important),
|
||||
.emby-checkbox:checked + span + .checkboxOutline,
|
||||
.selectionCommandsPanel,
|
||||
.countIndicator {
|
||||
background: var(--main-accent-color) !important;
|
||||
}
|
||||
.emby-checkbox:checked + span + .checkboxOutline,
|
||||
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline,
|
||||
.emby-input:focus,
|
||||
.emby-textarea:focus,
|
||||
.emby-select-withcolor:focus,
|
||||
.mdl-spinner__layer-1,
|
||||
.mdl-spinner__layer-2,
|
||||
.mdl-spinner__layer-3,
|
||||
.mdl-spinner__layer-4 {
|
||||
border-color: var(--main-accent-color) !important;
|
||||
}
|
||||
.button-link:not(.itemDetailPage .button-link),
|
||||
.selectLabelFocused,
|
||||
.textareaLabelFocused,
|
||||
.inputLabelFocused,
|
||||
.emby-tab-button:hover,
|
||||
.metadataSidebarIcon,
|
||||
.upNextDialog-countdownText {
|
||||
color: var(--main-accent-color) !important;
|
||||
}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.paper-icon-button-light:hover:not(:disabled) {
|
||||
color: var(--main-accent-color) !important;
|
||||
background-color: var(--secondary-accent-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Increase size of Jellyfin logo */
|
||||
.layout-desktop .pageTitleWithLogo {
|
||||
margin-left: 25px !important;
|
||||
height: 40px !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;
|
||||
margin-left: 10px !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 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;
|
||||
}
|
||||
/* 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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Rounded cards */
|
||||
.cardContent,
|
||||
.cardPadder,
|
||||
.cardOverlayContainer,
|
||||
.blurhash-canvas,
|
||||
.dialog,
|
||||
.itemSelectionPanel {
|
||||
border-radius: var(--rounded-cards) !important;
|
||||
}
|
||||
/* Rounded selection menu */
|
||||
.itemSelectionPanel {
|
||||
border: 2px solid var(--main-accent-color) !important;
|
||||
}
|
||||
.itemSelectionPanel .checkboxOutline {
|
||||
margin: 7px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Floating progress bar */
|
||||
.innerCardFooter {
|
||||
border-radius: var(--rounded-cards) !important;
|
||||
margin-left: 5px !important;
|
||||
margin-bottom: 5px !important;
|
||||
padding: 5px !important;
|
||||
bottom: 0% !important;
|
||||
background: rgba(0,0,0,0.5) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
.fullInnerCardFooter {
|
||||
bottom: 5% !important;
|
||||
width: 90% !important;
|
||||
margin: auto !important;
|
||||
border-radius: 100px !important;
|
||||
padding: 0px !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
.itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) {
|
||||
height: 10px !important;
|
||||
background: var(--main-background-transparent) !important;
|
||||
backdrop-filter: blur(2px) !important;
|
||||
}
|
||||
.innerCardFooterClear {
|
||||
background-color: none !important;
|
||||
}
|
||||
.innerCardFooter .cardText {
|
||||
padding: 0 0 0 10px !important
|
||||
}
|
||||
.itemProgressBarForeground:not(.playbackProgress .itemProgressBarForeground):not(.transcodingProgress .itemProgressBarForeground):not(.backgroundProgress .itemProgressBarForeground) {
|
||||
background: var(--main-accent-color) !important;
|
||||
}
|
||||
.itemProgressBarForeground {
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
.transcodingProgress > div {
|
||||
background-color: hsla(0,0%,100%,.2) !important;
|
||||
}
|
||||
.activeSession .backgroundProgress,
|
||||
.activeSession .playbackProgress,
|
||||
.activeSession .transcodingProgress {
|
||||
bottom: 10px !important;
|
||||
border-radius: 100px !important;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.layout-tv .emby-button-foreground {
|
||||
top: -14px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Custom button color */
|
||||
.navMenuOption-selected {
|
||||
background: var(--secondary-accent-color) !important;
|
||||
color: var(--main-accent-color) !important;
|
||||
backdrop-filter: blur(50px) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Transparent header bar */
|
||||
.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 {
|
||||
background-color: var(--main-background-transparent) !important;
|
||||
border-radius: 50px !important;
|
||||
backdrop-filter: blur(50px) !important;
|
||||
}
|
||||
.layout-desktop .headerTabs,
|
||||
.layout-desktop .headerRight,
|
||||
.layout-tv .headerTabs,
|
||||
.layout-tv .headerRight {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.layout-desktop .headerTabs {
|
||||
margin-left: 160px !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 {
|
||||
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 {
|
||||
backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
.upNextContainer {
|
||||
border-radius: var(--rounded-cards) !important;
|
||||
background-color: rgba(0, 0, 0, 0.6) !important;
|
||||
margin: 4% !important;
|
||||
}
|
||||
.toastVisible {
|
||||
border-radius: 30px !important;
|
||||
background-color: var(--main-background-transparent) !important;
|
||||
}
|
||||
.sliderBubble {
|
||||
border-radius: var(--rounded-cards) !important;
|
||||
background-color: var(--secondary-background-transparent) !important;
|
||||
backdrop-filter: blur(10px) !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;
|
||||
}
|
||||
.mdl-slider-background-lower {
|
||||
border-radius: 100px !important;
|
||||
background-color: var(--main-accent-color) !important;
|
||||
}
|
||||
.mdl-slider::-moz-range-thumb,
|
||||
.mdl-slider::-webkit-slider-thumb {
|
||||
background: #ffffff00 !important;
|
||||
height: 10px !important;
|
||||
width: 8px !important;
|
||||
border-radius: 2px !important;
|
||||
}
|
||||
.mdl-slider-hoverthumb:hover::-moz-range-thumb,
|
||||
.mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
|
||||
transform: scaleY(2);
|
||||
background: #fff !important;
|
||||
}
|
||||
.mdl-slider-background-upper {
|
||||
border-top-right-radius: 100px !important;
|
||||
border-bottom-right-radius: 100px !important;
|
||||
background: hsla(0,0%,100%,.2) !important;
|
||||
transform: translateX(-3px) !important;
|
||||
}
|
||||
.iconOsdProgressInner {
|
||||
background: var(--main-accent-color) !important;
|
||||
}
|
||||
|
||||
/* Up next card */
|
||||
.upNextDialog-buttons .upNextDialog-button {
|
||||
transition: .2s !important;
|
||||
}
|
||||
.upNextDialog-buttons .upNextDialog-button:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Support for Jellyscrub plugin */
|
||||
.chapterThumbContainer {
|
||||
background: none !important;
|
||||
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;
|
||||
}
|
||||
|
||||
/* Support for IntroSkipper plugin */
|
||||
.skipIntro {
|
||||
transition: 0.2s;
|
||||
border-radius: 100px !important;
|
||||
padding: 5px 10px !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
border: none !important;
|
||||
}
|
||||
.skipIntro:hover {
|
||||
box-shadow: unset !important;
|
||||
transition: .2s;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.skipIntro .paper-icon-button-light:hover:not(:disabled) {
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Settings and dashboard modifications */
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.paperList,
|
||||
.listItem:hover,
|
||||
.subtitleappearance-preview {
|
||||
border-radius: var(--rounded-cards) !important;
|
||||
}
|
||||
.button-submit,
|
||||
.emby-select,
|
||||
.checkboxOutline,
|
||||
.btnRefresh,
|
||||
#btnShutdown,
|
||||
.raised {
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
.button-submit {
|
||||
background: var(--main-accent-color) !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,
|
||||
.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 {
|
||||
border-radius: var(--rounded-cards) !important;
|
||||
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(--main-accent-color) !important;
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
/* Re-align active devices in dashboard */
|
||||
.activeDevices.itemsContainer {
|
||||
margin: 0px !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: var(--secondary-accent-color) !important;
|
||||
}
|
||||
.jstree-wholerow-hovered {
|
||||
background: var(--main-background-transparent) !important;
|
||||
}
|
||||
.jstree-children {
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
#editItemMetadataPage .btnHeaderSave {
|
||||
background: var(--main-accent-color) !important;
|
||||
border-radius: 100px !important;
|
||||
height: 40px !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Resize show/movie image on details page */
|
||||
.layout-desktop .detailImageContainer .card {
|
||||
top: 9em !important;
|
||||
width: 350px !important;
|
||||
}
|
||||
|
||||
/* Re-position content on details page */
|
||||
.layout-desktop .detailSection {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.layout-desktop .detailPageContent {
|
||||
padding-left: 3.3% !important;
|
||||
}
|
||||
|
||||
/* Re-position logo */
|
||||
.layout-desktop .detailLogo,
|
||||
.layout-tv .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: var(--main-background-transparent) !important;
|
||||
border-radius: 100px !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
.layout-mobile .mainDetailButtons {
|
||||
background: var(--secondary-background-color) !important;
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
|
||||
/* Add card around groups section */
|
||||
.layout-desktop .detailsGroupItem {
|
||||
background: var(--main-background-transparent) !important;
|
||||
padding: 10px 20px !important;
|
||||
border-radius: 100px !important;
|
||||
width: fit-content !important;
|
||||
max-width: max-content !important;
|
||||
backdrop-filter: blur(40px) !important;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
/* Fix for group section labels */
|
||||
.detailsGroupItem .label, .trackSelections .selectContainer .selectLabel {
|
||||
min-width: 75px;
|
||||
flex-basis: unset;
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
/* Alternative mobile group section card */
|
||||
.layout-mobile .itemDetailsGroup {
|
||||
background: var(--secondary-background-color) !important;
|
||||
padding: 15px 20px 5px 20px !important;
|
||||
border-radius: var(--rounded-cards) !important;
|
||||
}
|
||||
|
||||
/* Add card around description */
|
||||
.layout-desktop .detailSectionContent {
|
||||
background: var(--main-background-transparent) !important;
|
||||
border-radius: var(--rounded-cards) !important;
|
||||
padding: 40px 20px 10px 20px !important;
|
||||
margin-top: 50px !important;
|
||||
backdrop-filter: blur(40px) !important;
|
||||
}
|
||||
.layout-mobile .detailSectionContent {
|
||||
background: var(--secondary-background-color) !important;
|
||||
border-radius: var(--rounded-cards) !important;
|
||||
padding: 10px 20px !important;
|
||||
}
|
||||
|
||||
/* Add card around track selection */
|
||||
.layout-desktop .trackSelections {
|
||||
background: var(--main-background-transparent) !important;
|
||||
border-radius: var(--rounded-cards) !important;
|
||||
padding: 10px 20px !important;
|
||||
margin-top: 20px !important;
|
||||
backdrop-filter: blur(40px) !important;
|
||||
}
|
||||
.layout-mobile .trackSelections {
|
||||
background: var(--secondary-background-color) !important;
|
||||
border-radius: var(--rounded-cards) !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;
|
||||
margin-left: 390px !important;
|
||||
}
|
||||
.layout-desktop .detailPagePrimaryContainer {
|
||||
padding-left: 3.3% !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 description box */
|
||||
.layout-desktop .detailPagePrimaryContent {
|
||||
padding-left: 390px !important;
|
||||
min-height: 550px !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;
|
||||
}
|
||||
/* Modify play button */
|
||||
.layout-desktop .mainDetailButtons .btnPlay::after {
|
||||
content: "Play" !important;
|
||||
}
|
||||
.layout-desktop .mainDetailButtons .btnPlay {
|
||||
position: relative !important;
|
||||
margin-right: -85px !important;
|
||||
padding-right: 20px !important;
|
||||
right: 110px !important;
|
||||
background: var(--main-accent-color) !important;
|
||||
border-radius: 100px !important;
|
||||
color: var(--secondary-background-color) !important;
|
||||
}
|
||||
.layout-desktop .mainDetailButtons .detailButton {
|
||||
-webkit-flex-direction: row !important;
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Live TV */
|
||||
/* Modified background color of active guide cells */
|
||||
.programCell-active {
|
||||
background: var(--secondary-background-color) !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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Music Player */
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Fixes for TV Layout */
|
||||
.layout-tv .sectionTabs {
|
||||
width: auto !important;
|
||||
}
|
||||
.layout-tv .headerLeft {
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Login page */
|
||||
.layout-desktop #loginPage {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
.layout-desktop #loginPage .manualLoginForm .btnCancel {
|
||||
position: absolute !important;
|
||||
background: none !important;
|
||||
width: 100px !important;
|
||||
margin-left: -10px !important;
|
||||
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;
|
||||
width: 150px !important;
|
||||
text-align: right !important;
|
||||
position: absolute !important;
|
||||
margin-left: 255px !important;
|
||||
margin-top: -195px !important;
|
||||
font-size: smaller !important;
|
||||
color: rgba(255, 255, 255, 0.5) !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
.layout-desktop #loginPage .disclaimerContainer {
|
||||
top: 130px !important;
|
||||
position: relative !important;
|
||||
left: -50px !important;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Dialog box */
|
||||
.dialog {
|
||||
background-color: var(--secondary-background-color) !important;
|
||||
}
|
||||
.actionSheetTitle {
|
||||
margin: 10px 20px !important;
|
||||
}
|
||||
@ -1,20 +1,42 @@
|
||||
/* Variables */
|
||||
:root {
|
||||
--main-accent-color: #00a4dc;
|
||||
--primary-r: 0;
|
||||
--primary-g: 164;
|
||||
--primary-b: 220;
|
||||
--primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
|
||||
--secondary-accent-color: #00a4dc20;
|
||||
--main-background-color: #0F0F0F;
|
||||
--primary-background-color: #101010;
|
||||
--secondary-background-color: #181818;
|
||||
--main-background-transparent: rgba(35,35,35,0.5);
|
||||
--primary-background-transparent: rgba(35,35,35,0.5);
|
||||
--secondary-background-transparent: rgba(0,0,0,0.6);
|
||||
--rounded-cards: 15px;
|
||||
--blur: 10px;
|
||||
|
||||
/* Alternate accents*/
|
||||
--primary-alt1: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 1);
|
||||
--primary-alt2: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.85);
|
||||
--primary-alt3: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.7);
|
||||
--primary-alt4: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.55);
|
||||
--primary-alt5: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.4);
|
||||
}
|
||||
|
||||
/* Setting accent color variable */
|
||||
.listItemIcon:not(.listItemIcon-transparent):not(.notification_important),
|
||||
.emby-checkbox:checked + span + .checkboxOutline,
|
||||
.selectionCommandsPanel,
|
||||
.countIndicator {
|
||||
background: var(--main-accent-color) !important;
|
||||
.countIndicator,
|
||||
.MuiButton-root.MuiButton-containedSizeMedium,
|
||||
.MuiChip-root.MuiChip-colorInfo:not(.MuiChip-colorError),
|
||||
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,
|
||||
@ -24,21 +46,26 @@
|
||||
.mdl-spinner__layer-1,
|
||||
.mdl-spinner__layer-2,
|
||||
.mdl-spinner__layer-3,
|
||||
.mdl-spinner__layer-4 {
|
||||
border-color: var(--main-accent-color) !important;
|
||||
.mdl-spinner__layer-4,
|
||||
.progressring-spiner {
|
||||
border-color: var(--primary-accent-color) !important;
|
||||
}
|
||||
.button-link:not(.itemDetailPage .button-link),
|
||||
.page:not(.itemDetailPage) .button-link,
|
||||
.selectLabelFocused,
|
||||
.textareaLabelFocused,
|
||||
.inputLabelFocused,
|
||||
.emby-tab-button:hover,
|
||||
.metadataSidebarIcon,
|
||||
.upNextDialog-countdownText {
|
||||
color: var(--main-accent-color) !important;
|
||||
.upNextDialog-countdownText,
|
||||
.MuiSvgIcon-root.MuiSvgIcon-fontSizeInherit,
|
||||
.listItemImageButton:hover,
|
||||
.button-flat:hover,
|
||||
#divRunningTasks span {
|
||||
color: var(--primary-accent-color) !important;
|
||||
}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.paper-icon-button-light:hover:not(:disabled) {
|
||||
color: var(--main-accent-color) !important;
|
||||
color: var(--primary-accent-color) !important;
|
||||
background-color: var(--secondary-accent-color) !important;
|
||||
}
|
||||
}
|
||||
@ -49,13 +76,18 @@
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
/* Fix for empty header with padding */
|
||||
[dir="ltr"] .pageTitle:not(.pageTitleWithLogo):empty {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Static left drawer */
|
||||
.layout-desktop .mainDrawer {
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
width: 250px !important;
|
||||
/* Modified background color */
|
||||
background-color: var(--secondary-background-color) !important;
|
||||
background: var(--secondary-background-color) !important;
|
||||
/* Move drawer behind header */
|
||||
z-index: 998 !important;
|
||||
}
|
||||
@ -103,14 +135,13 @@
|
||||
.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;
|
||||
@ -131,12 +162,13 @@
|
||||
.cardOverlayContainer,
|
||||
.blurhash-canvas,
|
||||
.dialog,
|
||||
.itemSelectionPanel {
|
||||
.itemSelectionPanel,
|
||||
.nowPlayingPageImage {
|
||||
border-radius: var(--rounded-cards) !important;
|
||||
}
|
||||
/* Rounded selection menu */
|
||||
.itemSelectionPanel {
|
||||
border: 2px solid var(--main-accent-color) !important;
|
||||
border: 2px solid var(--primary-accent-color) !important;
|
||||
}
|
||||
.itemSelectionPanel .checkboxOutline {
|
||||
margin: 7px !important;
|
||||
@ -152,7 +184,7 @@
|
||||
padding: 5px 15px 5px 5px !important;
|
||||
bottom: 0% !important;
|
||||
background: rgba(0,0,0,0.5) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
backdrop-filter: blur(var(--blur)) !important;
|
||||
}
|
||||
.fullInnerCardFooter {
|
||||
bottom: 5% !important;
|
||||
@ -164,8 +196,9 @@
|
||||
}
|
||||
.itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) {
|
||||
height: 10px !important;
|
||||
background: var(--main-background-transparent) !important;
|
||||
background: var(--primary-background-transparent) !important;
|
||||
backdrop-filter: blur(2px) !important;
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
.innerCardFooterClear {
|
||||
background-color: none !important;
|
||||
@ -173,8 +206,8 @@
|
||||
.innerCardFooter .cardText {
|
||||
padding: 0 0 0 10px !important
|
||||
}
|
||||
.itemProgressBarForeground:not(.playbackProgress .itemProgressBarForeground):not(.transcodingProgress .itemProgressBarForeground):not(.backgroundProgress .itemProgressBarForeground) {
|
||||
background: var(--main-accent-color) !important;
|
||||
.cardImageContainer .innerCardFooter .itemProgressBar .itemProgressBarForeground {
|
||||
background: var(--primary-accent-color) !important;
|
||||
}
|
||||
.itemProgressBarForeground {
|
||||
border-radius: 100px !important;
|
||||
@ -219,6 +252,8 @@
|
||||
margin: auto !important;
|
||||
text-align: center !important;
|
||||
height: 45px !important;
|
||||
margin-top: 3px !important;
|
||||
margin-bottom: 3px !important;
|
||||
}
|
||||
.navMenuOption:hover:not(.navMenuOption-selected) {
|
||||
background-color: rgba(44, 44, 44, 0.7);
|
||||
@ -243,12 +278,14 @@
|
||||
/* Custom button color */
|
||||
.navMenuOption-selected {
|
||||
background: var(--secondary-accent-color) !important;
|
||||
color: var(--main-accent-color) !important;
|
||||
color: var(--primary-accent-color) !important;
|
||||
}
|
||||
|
||||
/* Modified background color */
|
||||
html {
|
||||
background-color: var(--main-background-color) !important;
|
||||
html,
|
||||
.backgroundContainer:not(.withBackdrop):not(.backgroundContainer-transparent),
|
||||
.noBackdropTransparency .detailPageSecondaryContainer {
|
||||
background-color: var(--primary-background-color) !important;
|
||||
}
|
||||
|
||||
|
||||
@ -266,18 +303,17 @@ html {
|
||||
/* Rounded header buttons */
|
||||
.headerTabs,
|
||||
.headerRight {
|
||||
background-color: var(--main-background-transparent) !important;
|
||||
background-color: var(--primary-background-transparent) !important;
|
||||
border-radius: 50px !important;
|
||||
backdrop-filter: blur(50px) !important;
|
||||
backdrop-filter: blur(var(--blur)) !important;
|
||||
}
|
||||
.layout-desktop .headerTabs,
|
||||
.layout-desktop .headerRight,
|
||||
.layout-tv .headerTabs,
|
||||
.layout-tv .headerRight {
|
||||
.layout-tv .headerTabs {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.layout-desktop .headerTabs {
|
||||
margin-left: 160px !important;
|
||||
margin-top: -58px !important;
|
||||
}
|
||||
/* Button height */
|
||||
.headerRight,
|
||||
@ -305,58 +341,134 @@ html {
|
||||
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)) {
|
||||
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--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;
|
||||
margin-left: 50% !important;
|
||||
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%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Player modifications */
|
||||
.upNextContainer, .toastVisible {
|
||||
backdrop-filter: blur(10px) !important;
|
||||
.upNextContainer:not(#skipIntro), .toastVisible {
|
||||
backdrop-filter: blur(var(--blur)) !important;
|
||||
}
|
||||
.upNextContainer {
|
||||
.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(--main-background-transparent) !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(10px) !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;
|
||||
@supports selector(div:not(.parent .child)) {
|
||||
.mdl-slider-background-flex:not(.layout-mobile .nowPlayingBar .mdl-slider-background-flex) {
|
||||
height: 10px !important;
|
||||
margin-top: -5px !important;
|
||||
border-radius: 100px !important;
|
||||
background: hsla(0,0%,100%,.2) !important;
|
||||
}
|
||||
}
|
||||
@supports not selector(div:not(.parent .child)) {
|
||||
.mdl-slider-background-flex {
|
||||
height: 10px !important;
|
||||
margin-top: -5px !important;
|
||||
border-radius: 100px !important;
|
||||
background: hsla(0,0%,100%,.2) !important;
|
||||
}
|
||||
}
|
||||
.mdl-slider-background-lower {
|
||||
border-radius: 100px !important;
|
||||
background-color: var(--main-accent-color) !important;
|
||||
background-color: var(--primary-accent-color) !important;
|
||||
}
|
||||
.mdl-slider::-moz-range-thumb,
|
||||
/* Moz */
|
||||
.mdl-slider::-moz-range-thumb {
|
||||
background: #ffffff00 !important;
|
||||
height: 10px !important;
|
||||
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;
|
||||
height: 10px !important;
|
||||
width: 8px !important;
|
||||
border-radius: 2px !important;
|
||||
}
|
||||
.mdl-slider-hoverthumb:hover::-moz-range-thumb,
|
||||
.mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
|
||||
transform: scaleY(2);
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.mdl-slider-background-upper {
|
||||
border-top-right-radius: 100px !important;
|
||||
border-bottom-right-radius: 100px !important;
|
||||
@ -364,7 +476,7 @@ html {
|
||||
transform: translateX(-3px) !important;
|
||||
}
|
||||
.iconOsdProgressInner {
|
||||
background: var(--main-accent-color) !important;
|
||||
background: var(--primary-accent-color) !important;
|
||||
}
|
||||
|
||||
/* Up next card */
|
||||
@ -397,21 +509,77 @@ html {
|
||||
}
|
||||
|
||||
/* Support for IntroSkipper plugin */
|
||||
.skipIntro {
|
||||
#skipIntro .btnSkipIntro {
|
||||
transition: 0.2s;
|
||||
border-radius: 100px !important;
|
||||
padding: 5px 10px !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(var(--blur)) !important;
|
||||
}
|
||||
.skipIntro:hover {
|
||||
box-shadow: unset !important;
|
||||
#skipIntro .btnSkipIntro:hover {
|
||||
transition: .2s;
|
||||
transform: scale(1.05);
|
||||
background: var(--primary-accent-color) !important;
|
||||
}
|
||||
.skipIntro .paper-icon-button-light:hover:not(:disabled) {
|
||||
#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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Modify player buttons */
|
||||
.material-icons.fast_rewind::before {
|
||||
content: "\e059";
|
||||
}
|
||||
.material-icons.fast_forward::before {
|
||||
content: "\e057";
|
||||
}
|
||||
.material-icons.audiotrack::before {
|
||||
content: "\e91f";
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -432,7 +600,7 @@ html {
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
.button-submit {
|
||||
background: var(--main-accent-color) !important;
|
||||
background: var(--primary-accent-color) !important;
|
||||
}
|
||||
/* Modify username placement on profile page */
|
||||
.layout-desktop #userProfilePage .readOnlyContent div:not([class]), div[class=""]{
|
||||
@ -473,26 +641,177 @@ html {
|
||||
}
|
||||
.layout-desktop a[data-role="button"] {
|
||||
background: none !important;
|
||||
|
||||
}
|
||||
.layout-desktop div[data-role="controlgroup"] a.ui-btn-active {
|
||||
background: var(--main-accent-color) !important;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
/* Modify padding for textarea items so the bottom isn't cut off */
|
||||
textarea {
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
/* Background behind dashboard dropdown navigation buttons */
|
||||
@supports selector(:has(*)) {
|
||||
.MuiListItem-root:has(.MuiSvgIcon-root[data-testid^="Expand"])::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: #121212;
|
||||
inset: 1px -5px 0px -5px;
|
||||
border-radius: 25px;
|
||||
opacity: 0;
|
||||
transition: inset 0.25s ease-out, opacity 0.01s 0.25s;
|
||||
}
|
||||
.MuiListItem-root:has(.MuiSvgIcon-root[data-testid="ExpandLessIcon"])::before {
|
||||
inset: 0px -5px -190px -5px;
|
||||
opacity: 1;
|
||||
transition: inset 0.25s ease-out, opacity 0.01s;
|
||||
}
|
||||
.MuiListItemButton-root:has(.MuiSvgIcon-root[data-testid="ExpandLessIcon"]) {
|
||||
transform: scale(1.05) !important;
|
||||
}
|
||||
.MuiCollapse-root.MuiCollapse-vertical.MuiCollapse-entered {
|
||||
padding-bottom: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Metadata editor fixes */
|
||||
.editPageSidebar {
|
||||
margin-left: 250px !important;
|
||||
width: 20% !important;
|
||||
.layout-desktop .editPageSidebar {
|
||||
width: 25vw !important;
|
||||
}
|
||||
.layout-desktop #editItemMetadataPage {
|
||||
margin-left: 215px !important;
|
||||
.layout-desktop .editPageInnerContent {
|
||||
width: 74vw !important;
|
||||
}
|
||||
.jstree-default-large .jstree-node {
|
||||
line-height: 35px !important;
|
||||
@ -501,13 +820,13 @@ html {
|
||||
background: var(--secondary-accent-color) !important;
|
||||
}
|
||||
.jstree-wholerow-hovered {
|
||||
background: var(--main-background-transparent) !important;
|
||||
background: var(--primary-background-transparent) !important;
|
||||
}
|
||||
.jstree-children {
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
#editItemMetadataPage .btnHeaderSave {
|
||||
background: var(--main-accent-color) !important;
|
||||
background: var(--primary-accent-color) !important;
|
||||
border-radius: 100px !important;
|
||||
height: 40px !important;
|
||||
color: white !important;
|
||||
@ -517,8 +836,13 @@ html {
|
||||
|
||||
/* Resize show/movie image on details page */
|
||||
.layout-desktop .detailImageContainer .card {
|
||||
top: 1.8em !important;
|
||||
width: 18.3vw !important;
|
||||
position: absolute !important;
|
||||
}
|
||||
/* Legacy style to not break pre-10.11.X */
|
||||
.layout-desktop .infoWrapper .detailImageContainer .card {
|
||||
top: 9em !important;
|
||||
width: 350px !important;
|
||||
}
|
||||
|
||||
/* Re-position content on details page */
|
||||
@ -527,6 +851,7 @@ html {
|
||||
}
|
||||
.layout-desktop .detailPageContent {
|
||||
padding-left: 3.3% !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
/* Re-position logo */
|
||||
@ -534,7 +859,7 @@ html {
|
||||
.layout-tv .detailLogo {
|
||||
right: 0 !important;
|
||||
left: 4% !important;
|
||||
top: 14vh !important;
|
||||
top: 10% !important;
|
||||
}
|
||||
|
||||
/* Transparent ribbon bar */
|
||||
@ -544,16 +869,16 @@ html {
|
||||
|
||||
/* Add card around top-right buttons */
|
||||
.mainDetailButtons {
|
||||
background: var(--main-background-transparent) !important;
|
||||
background: var(--primary-background-transparent) !important;
|
||||
border-radius: 100px !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
backdrop-filter: blur(var(--blur)) !important;
|
||||
}
|
||||
|
||||
/* Add card around groups section */
|
||||
.layout-desktop .detailsGroupItem {
|
||||
background: var(--secondary-background-color) !important;
|
||||
padding: 10px 20px !important;
|
||||
border-radius: 100px !important;
|
||||
border-radius: 20px !important;
|
||||
width: fit-content !important;
|
||||
max-width: max-content !important;
|
||||
display: flex;
|
||||
@ -573,6 +898,9 @@ html {
|
||||
padding: 15px 20px 5px 20px !important;
|
||||
border-radius: var(--rounded-cards) !important;
|
||||
}
|
||||
.layout-mobile .detailPageContent {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
/* Add card around description */
|
||||
.layout-desktop .detailSectionContent {
|
||||
@ -581,6 +909,11 @@ html {
|
||||
padding: 40px 20px 10px 20px !important;
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
@supports selector(:has(*)) {
|
||||
.layout-desktop .detailPageWrapperContainer:not(:has(.itemMiscInfo-primary .mediaInfoItem)) .detailSectionContent {
|
||||
padding: 0px 20px 10px 20px !important;
|
||||
}
|
||||
}
|
||||
.layout-mobile .detailSectionContent {
|
||||
background: var(--secondary-background-color) !important;
|
||||
border-radius: var(--rounded-cards) !important;
|
||||
@ -598,30 +931,55 @@ html {
|
||||
/* Fix for track select dropdowns */
|
||||
.trackSelections .selectContainer .detailTrackSelect {
|
||||
padding: 0 10px;
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
|
||||
/* Re-position title */
|
||||
.layout-desktop .infoWrapper {
|
||||
margin-top: 245px !important;
|
||||
margin-left: 390px !important;
|
||||
margin-left: 20.8vw !important;
|
||||
}
|
||||
.layout-desktop .detailPagePrimaryContainer {
|
||||
padding-left: 3.3% !important;
|
||||
}
|
||||
/* Fix for title position on 10.11.X */
|
||||
.layout-desktop [dir="ltr"] .detailPagePrimaryContainer:not(.detailRibbon) .detailRibbon {
|
||||
padding-left: unset !important;
|
||||
}
|
||||
.layout-desktop .nameContainer {
|
||||
position: absolute !important;
|
||||
margin-top: -55px !important;
|
||||
margin-top: -48px !important;
|
||||
}
|
||||
.layout-desktop .itemMiscInfo {
|
||||
position: absolute !important;
|
||||
margin-left: 21px !important;
|
||||
margin-left: 12px !important;
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
|
||||
/* Move description box */
|
||||
.layout-desktop .detailPagePrimaryContent {
|
||||
padding-left: 390px !important;
|
||||
min-height: 550px !important;
|
||||
padding-left: 20.4vw !important;
|
||||
}
|
||||
.layout-mobile .detailPagePrimaryContent {
|
||||
padding-right: 5% !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 {
|
||||
min-height: 29vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Move track selection box */
|
||||
@ -671,7 +1029,14 @@ html {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
box-ordinal-group: 2;
|
||||
margin: 0.45em 0 0 0 !important;
|
||||
}
|
||||
/* 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 {
|
||||
@ -682,7 +1047,7 @@ html {
|
||||
margin-right: -85px !important;
|
||||
padding-right: 20px !important;
|
||||
right: 110px !important;
|
||||
background: var(--main-accent-color) !important;
|
||||
background: var(--primary-accent-color) !important;
|
||||
border-radius: 100px !important;
|
||||
color: var(--secondary-background-color) !important;
|
||||
}
|
||||
@ -690,6 +1055,18 @@ html {
|
||||
-webkit-flex-direction: row !important;
|
||||
flex-direction: row !important;
|
||||
}
|
||||
/* Change crop for list item images */
|
||||
.listItemImage {
|
||||
background-size: contain !important;
|
||||
border-radius: var(--rounded-cards);
|
||||
}
|
||||
/* Move up content if no backdrop image is present - I might make this work at some point, right now it causes the page to jump around when it is loading
|
||||
@supports selector(:has(*)) {
|
||||
.layout-desktop:not(:has(.backdropContainer .backdropImage)) #itemBackdrop {
|
||||
height: 20vh !important;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
@ -791,6 +1168,11 @@ html {
|
||||
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;
|
||||
}
|
||||
/* Move cancel button */
|
||||
.layout-desktop #loginPage .manualLoginForm .btnCancel {
|
||||
position: absolute !important;
|
||||
background: none !important;
|
||||
@ -799,6 +1181,12 @@ html {
|
||||
margin-top: 70px !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
/* Shift cancel button on JMP */
|
||||
@supports not selector(:has(*)) {
|
||||
.layout-desktop #loginPage .manualLoginForm .btnCancel {
|
||||
margin-top: 115px !important;
|
||||
}
|
||||
}
|
||||
.layout-desktop #loginPage .visualLoginForm {
|
||||
position: relative !important;
|
||||
background: var(--secondary-background-color) !important;
|
||||
@ -816,7 +1204,7 @@ html {
|
||||
color: rgba(255, 255, 255, 0.5) !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
.layout-desktop #loginPage .disclaimerContainer {
|
||||
.layout-desktop #loginPage .loginDisclaimerContainer {
|
||||
top: 130px !important;
|
||||
position: relative !important;
|
||||
left: -50px !important;
|
||||
@ -866,3 +1254,47 @@ html {
|
||||
.actionSheetTitle {
|
||||
margin: 10px 20px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Dynamic backdrop support */
|
||||
|
||||
/* Translucent cards */
|
||||
.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailsGroupItem,
|
||||
.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailSectionContent,
|
||||
.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .trackSelections {
|
||||
background: var(--primary-background-transparent) !important;
|
||||
backdrop-filter: blur(var(--blur)) !important;
|
||||
}
|
||||
|
||||
/* Transparent drawer */
|
||||
.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 {
|
||||
background: transparent !important;
|
||||
}
|
||||
.layout-desktop #itemDetailPage.noBackdropTransparency::after {
|
||||
position: fixed;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 250px;
|
||||
background: var(--secondary-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Blur buttons */
|
||||
.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;
|
||||
}
|
||||
@ -1,4 +1,7 @@
|
||||
:root {
|
||||
--main-accent-color: #EA7070;
|
||||
--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);
|
||||
}
|
||||
71
CSS/theme-oled.css
Normal file
71
CSS/theme-oled.css
Normal file
@ -0,0 +1,71 @@
|
||||
/* 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,4 +1,7 @@
|
||||
:root {
|
||||
--main-accent-color: #93D7B6;
|
||||
--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,6 +1,16 @@
|
||||
:root {
|
||||
--main-accent-color: #E8ECEF;
|
||||
--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,
|
||||
@ -8,3 +18,7 @@
|
||||
.layout-desktop .countIndicator {
|
||||
color: var(--secondary-background-color) !important;
|
||||
}
|
||||
|
||||
#skipIntro .emby-button:hover {
|
||||
color: #000 !important;
|
||||
}
|
||||
104
README.md
104
README.md
@ -1,65 +1,58 @@
|
||||
<img src="./images/scyfin-full.png" alt="scyfin logo" width="200"/>
|
||||
|
||||
---
|
||||
### **Modern CSS theme for Jellyfin with support for backdrops and custom accent colors**
|
||||
|
||||
### **Custom CSS theme for Jellyfin (plus a backdrops supported version)**
|
||||
[Go to installation](#installation)
|
||||
|
||||
---
|
||||
|
||||
### [Go to installation](#installation)
|
||||
|
||||
---
|
||||
|
||||
### **Scyfin Complete Theme**
|
||||
### **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/dashboard.png" alt="dashboard" width="100%"/>
|
||||
<img src="./images/login.png" alt="login" width="100%"/>
|
||||
|
||||
`@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');`
|
||||
|
||||
### Options (Add these below the full theme)
|
||||
- Disable static left drawer
|
||||
- `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');`
|
||||
- Themes:
|
||||
- Seafoam
|
||||
- `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-seafoam.css');`
|
||||
- <img src="./images/seafoam.png" alt="install2" width="40%"/>
|
||||
- Coral
|
||||
- `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-coral.css');`
|
||||
- <img src="./images/coral.png" alt="install2" width="40%"/>
|
||||
- Snow
|
||||
- `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');`
|
||||
- <img src="./images/snow.png" alt="install2" width="40%"/>
|
||||
|
||||
---
|
||||
|
||||
### **Scyfin Complete Theme - Backdrops Supported**
|
||||
### **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');
|
||||
```
|
||||
|
||||
**Note -**
|
||||
* Only install ONE version of the theme, do not install both the normal version and the backdrops supported version
|
||||
* Backdrops need to be enabled in Jellyfin (Settings > Display > Backdrops) for backdrop supported version to display properly
|
||||
---
|
||||
|
||||
<img src="./images/homepage-backdrops.png" alt="homepage-backdrops" width="100%"/>
|
||||
<img src="./images/details-backdrops.png" alt="details-backdrops" width="100%"/>
|
||||
### **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%"/>
|
||||
|
||||
`@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme-backdrop.css');`
|
||||
### 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%"/>
|
||||
|
||||
### Options (Add these below the full theme)
|
||||
- Disable static left drawer (BACKDROP VERSION)
|
||||
- `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/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="install2" width="40%"/>
|
||||
- Coral
|
||||
- `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-coral.css');`
|
||||
- <img src="./images/coral.png" alt="install2" width="40%"/>
|
||||
- Snow
|
||||
- `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');`
|
||||
- <img src="./images/snow.png" alt="install2" width="40%"/>
|
||||
### 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%"/>
|
||||
|
||||
### 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%"/>
|
||||
|
||||
---
|
||||
|
||||
@ -70,15 +63,13 @@
|
||||
**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 "General"
|
||||
* Near the bottom, under "Custom CSS code", paste the `@import url` for the theme you want
|
||||
* Note -
|
||||
* Only install ONE version of the theme, do not install both the normal version and the backdrops supported version
|
||||
* Navigate to "Branding"
|
||||
* Near the bottom, under "Custom CSS code", paste the `@import url` for the base Scyfin theme
|
||||
* Example:
|
||||
* <img src="./images/install.png" alt="install" width="80%"/>
|
||||
* Optional - Paste the `@import url` for any options you want
|
||||
* <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/install2.png" alt="install2" width="80%"/>
|
||||
* <img src="./images/install-server-options.png" alt="install-server-options" width="80%"/>
|
||||
* Click "Save"
|
||||
|
||||
---
|
||||
@ -87,15 +78,12 @@
|
||||
* 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 theme you want
|
||||
* Near the middle, under "Custom CSS code", paste the `@import url` for the base Scyfin theme
|
||||
* Note -
|
||||
* Only install ONE version of the theme, do not install both the normal version and the backdrops supported version
|
||||
* 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/install3.png" alt="install3" width="80%"/>
|
||||
* Optional - Paste the `@import url` for any options you want
|
||||
* <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/install4.png" alt="install4" width="80%"/>
|
||||
* <img src="./images/install-client-options.png" alt="install-client-options" width="80%"/>
|
||||
* Click "Save"
|
||||
|
||||
---
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 262 KiB After Width: | Height: | Size: 349 KiB |
BIN
images/details-oled.png
Normal file
BIN
images/details-oled.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
images/homepage-oled.png
Normal file
BIN
images/homepage-oled.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1007 KiB After Width: | Height: | Size: 1004 KiB |
BIN
images/install-client-base.png
Normal file
BIN
images/install-client-base.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
images/install-client-options.png
Normal file
BIN
images/install-client-options.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
images/install-server-base.png
Normal file
BIN
images/install-server-base.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
images/install-server-options.png
Normal file
BIN
images/install-server-options.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Loading…
Reference in New Issue
Block a user