diff --git a/CSS/css-scyfin/scyfin-theme-backdrop.css b/CSS/css-scyfin/scyfin-theme-backdrop.css index dc05c0e..6d03673 100644 --- a/CSS/css-scyfin/scyfin-theme-backdrop.css +++ b/CSS/css-scyfin/scyfin-theme-backdrop.css @@ -1,7 +1,7 @@ /* Variables */ :root { --main-accent-color: #00a4dc; - --secondary-accent-color: rgba(0, 164, 220, 0.2); + --secondary-accent-color: #00a4dc20; --main-background-color: #0F0F0F; --secondary-background-color: #181818; --main-background-transparent: rgba(35,35,35,0.5); @@ -12,6 +12,7 @@ /* Setting accent color variable */ .listItemIcon:not(.listItemIcon-transparent):not(.notification_important), .emby-checkbox:checked + span + .checkboxOutline, +.selectionCommandsPanel, .countIndicator { background: var(--main-accent-color) !important; } @@ -31,7 +32,8 @@ .textareaLabelFocused, .inputLabelFocused, .emby-tab-button:hover, -.metadataSidebarIcon { +.metadataSidebarIcon, +.upNextDialog-countdownText { color: var(--main-accent-color) !important; } @media (hover: hover) and (pointer: fine) { @@ -109,6 +111,17 @@ .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); +} @@ -149,7 +162,7 @@ padding: 0px !important; backdrop-filter: none !important; } -.itemProgressBar { +.itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) { height: 10px !important; background: var(--main-background-transparent) !important; backdrop-filter: blur(2px) !important; @@ -160,9 +173,32 @@ .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; - background: var(--main-accent-color) !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; } @@ -275,11 +311,12 @@ /* Player modifications */ .upNextContainer, .toastVisible { - backdrop-filter: blur(50px) !important; + backdrop-filter: blur(10px) !important; } .upNextContainer { border-radius: var(--rounded-cards) !important; - background-color: rgba(0, 0, 0, 0.7) !important; + background-color: rgba(0, 0, 0, 0.6) !important; + margin: 4% !important; } .toastVisible { border-radius: 30px !important; @@ -290,6 +327,11 @@ 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; @@ -300,24 +342,46 @@ border-radius: 100px !important; background-color: var(--main-accent-color) !important; } -.mdl-slider::-moz-range-thumb { - background: rgba(0,0,0,0) !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 { - display: none !important; + 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: 40px !important; + margin-bottom: 47px !important; + box-shadow: 0 0 1.9vh #000 !important; } .chapterThumbTextContainer { background: none !important; @@ -329,6 +393,23 @@ 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 */ @@ -552,9 +633,6 @@ padding-left: 390px !important; min-height: 550px !important; } -.layout-desktop .detailPagePrimaryContent:has(.genresGroup.hide):has(.directorsGroup.hide):has(.writersGroup.hide) { - min-height: unset !important; -} /* Move track selection box */ .detailSection { diff --git a/CSS/css-scyfin/scyfin-theme.css b/CSS/css-scyfin/scyfin-theme.css index 99b6860..cec61b5 100644 --- a/CSS/css-scyfin/scyfin-theme.css +++ b/CSS/css-scyfin/scyfin-theme.css @@ -1,7 +1,7 @@ /* Variables */ :root { --main-accent-color: #00a4dc; - --secondary-accent-color: rgba(0, 164, 220, 0.2); + --secondary-accent-color: #00a4dc20; --main-background-color: #0F0F0F; --secondary-background-color: #181818; --main-background-transparent: rgba(35,35,35,0.5); @@ -12,6 +12,7 @@ /* Setting accent color variable */ .listItemIcon:not(.listItemIcon-transparent):not(.notification_important), .emby-checkbox:checked + span + .checkboxOutline, +.selectionCommandsPanel, .countIndicator { background: var(--main-accent-color) !important; } @@ -31,7 +32,8 @@ .textareaLabelFocused, .inputLabelFocused, .emby-tab-button:hover, -.metadataSidebarIcon { +.metadataSidebarIcon, +.upNextDialog-countdownText { color: var(--main-accent-color) !important; } @media (hover: hover) and (pointer: fine) { @@ -109,6 +111,17 @@ .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); +} @@ -149,7 +162,7 @@ padding: 0px !important; backdrop-filter: none !important; } -.itemProgressBar { +.itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) { height: 10px !important; background: var(--main-background-transparent) !important; backdrop-filter: blur(2px) !important; @@ -160,9 +173,32 @@ .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; - background: var(--main-accent-color) !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; } @@ -278,11 +314,12 @@ html { /* Player modifications */ .upNextContainer, .toastVisible { - backdrop-filter: blur(50px) !important; + backdrop-filter: blur(10px) !important; } .upNextContainer { border-radius: var(--rounded-cards) !important; - background-color: rgba(0, 0, 0, 0.7) !important; + background-color: rgba(0, 0, 0, 0.6) !important; + margin: 4% !important; } .toastVisible { border-radius: 30px !important; @@ -293,6 +330,11 @@ html { 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; @@ -303,24 +345,46 @@ html { border-radius: 100px !important; background-color: var(--main-accent-color) !important; } -.mdl-slider::-moz-range-thumb { - background: rgba(0,0,0,0) !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 { - display: none !important; + 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: 40px !important; + margin-bottom: 47px !important; + box-shadow: 0 0 1.9vh #000 !important; } .chapterThumbTextContainer { background: none !important; @@ -332,6 +396,23 @@ html { 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 */ @@ -542,9 +623,6 @@ html { padding-left: 390px !important; min-height: 550px !important; } -.layout-desktop .detailPagePrimaryContent:has(.genresGroup.hide):has(.directorsGroup.hide):has(.writersGroup.hide) { - min-height: unset !important; -} /* Move track selection box */ .detailSection {