18 Commits
Author SHA1 Message Date
lscambo13 da00ec6b39 Fix: Typo! 2026-07-05 15:58:17 +05:30
lscambo13 6659e42fe5 New: Added a way to easily switch between IMDb and TMDB star colors (#300)
```
.starIcon{
    /* use --imdb for a gold star */
    --colors: var(--tmdb);
}
```
2026-07-05 15:54:06 +05:30
lscambo13 f916d5a8af Fix: Three-dot menu button on cards was too thin 2026-07-05 15:35:53 +05:30
lscambo13 d876036eb0 Fix: Smaller column gap and many other overrides were not being applied on phones
Fix: Made the icon shadow a touch sharper
dev: rearranged some code and updated a color
2026-07-05 15:32:49 +05:30
lscambo13 3c4e59be76 New: Added scroll snapping to horizontal lists 2026-06-28 20:39:17 +05:30
lscambo13 c95c635bb8 New: The save button in user settings pages is now always in view 2026-06-28 20:37:14 +05:30
lscambo13 f016aa8397 Fix: Delete button was losing its color when focused 2026-06-28 20:23:55 +05:30
lscambo13 ea2c414089 dev: rearranged some code 2026-06-28 20:21:31 +05:30
lscambo13 635ecf1501 dev: tweaked some css variables 2026-06-28 20:14:35 +05:30
lscambo13 2e8bc25e7e Fix: With media bar add-on, dimming behind the drawer wasn't working 2026-06-28 18:17:42 +05:30
lscambo13 b2036f52b5 New: Introduced support for Theme Videos
- they should be placed inside `backdrops` folder like:
` ./Movie (Year)/backdrops/theme1.mp4`
2026-06-20 23:52:17 +05:30
lscambo13 062aecdbb9 Fix: Hamburger menu was not covering the whole screen height on some iPhones (#262) 2026-06-20 21:51:57 +05:30
lscambo13 c85814e879 Fix: TMDB reviews section added by Jellyfin Enhanced was overflowing the layout (#234) 2026-06-12 20:36:12 +05:30
lscambo13 2fb990e597 dev: potential fix for #163, #192, #196, and #262 2026-06-12 19:57:20 +05:30
lscambo13 b9bad1d34e New: Support for the 'Episodes On Series Page' feature via KefinTweaks (#282) 2026-06-10 21:27:04 +05:30
lscambo13 1cf0ff8ff5 Fix: Avoid adding margin to empty containers added by KefinTweaks 2026-06-09 19:22:16 +05:30
lscambo13 2d3961c126 dev: disabled ordering during minification; it didn't make a difference. 2026-06-09 19:20:26 +05:30
lscambo13andMacley 7381e6358f New: Support for starr and Letterboxd external links via Jellyfin Enhanced (#297)
* Remove background color from external links button

* Add back previous change for default bg arr link

* Add custom hover colors to arr links provided by JellyFin Enhanced

* fix: removed redundant selectors; updated colors for higher contrast on hover and active

---------

Co-authored-by: Macley <26381427+Macleykun@users.noreply.github.com>
2026-06-08 19:39:23 +05:30
3 changed files with 239 additions and 171 deletions

No files matched your search

+235 -158
View File
@@ -7,11 +7,38 @@
/* Inter Font Family */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/* Material Symbols Rounded - Minimal */
/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=add,airplay,album,arrow_back,arrow_forward,arrow_upward,audiotrack,autorenew,backspace,book,brightness_high,call_split,cast,check,chevron_left,chevron_right,clear,close,closed_caption,cloud_download,content_copy,dashboard,delete,devices_other,download,drag_handle,dvr,exit_to_app,expand_more,explore,fast_forward,fast_rewind,favorite,fiber_manual_record,fiber_smart_record,file_download,filter_alt,folder,folder_open,forward_30,fullscreen,get_app,groups,home,image,info,info_outline,keyboard,keyboard_arrow_down,keyboard_arrow_left,keyboard_arrow_right,keyboard_arrow_up,keyboard_return,library_add_check,live_tv,local_movies,lock,lyrics,menu,mode_edit,more_vert,movie,music_note,music_video,navigate_before,navigate_next,pause,pause_circle_filled,pause_circle_outline,person,phonelink_lock,photo,photo_album,picture_in_picture_alt,play,play_arrow,play_circle_filled,play_circle_outline,playlist_add,preview,queue,queue_music,quiz,redo,refresh,remove_circle,remove_red_eye,repeat,repeat_one,replay,replay_10,save,schedule,search,settings,shuffle,skip_next,skip_previous,sort_by_alpha,space_bar,star,stop,storage,subtitles,sync,text_decrease,text_increase,theaters,toc,tv,undo,update,video_library,videocam,view_comfy,volume_off,volume_up */
@font-face {
font-family: "Material Symbols Rounded Minimal";
font-style: normal;
font-weight: 100 700;
src: url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v346)
format("woff2");
}
/* Material Symbols Rounded - Full */
/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 */
@font-face {
font-family: "Material Symbols Rounded";
font-style: normal;
font-weight: 100 700;
src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v346/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2)
format("woff2");
}
:root {
--elegantFinFooterText: "ElegantFin Nightly";
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 425;
font-style: normal;
-webkit-tap-highlight-color: transparent !important;
/* Base theme colors */
color-scheme: dark;
color: var(--textColor);
--darkerGradientPoint: #111827;
--darkerGradientPointAlpha: rgba(17, 24, 39, 0.85);
--lighterGradientPoint: #1d2635;
@@ -24,16 +51,15 @@
--darkerBorderColor: hsl(214, 13%, 22%);
--lighterBorderColor: hsla(0, 0%, 100%, 0.2);
--selectorBackgroundColor: rgb(55, 65, 81);
--selectorBackgroundColorAlpha: rgba(55, 65, 81, 0.5);
--selectorBackgroundColor: hsl(217, 19%, 27%);
--selectorBackgroundColorAlpha: hsla(217, 19%, 27%, 0.5);
--activeColorAlpha: rgba(119, 91, 244, 0.9);
--activeColor: rgb(119, 91, 244);
--osdSeekBarPlayedColor: var(--textColor);
--osdSeekBarBufferedColorAlpha: rgba(128, 128, 128, 0.5);
--osdSeekBarThumbColor: white;
--tableBodyColor: rgb(31 41 55 / 1);
--uiAccentColor: rgb(117 111 226);
--accentColor: rgb(117 111 226);
--accentHoverColor: hsl(243, 75%, 62%);
--btnMiniPlayColor: rgb(41 154 93);
--btnMiniPlayBorderColor: rgb(50, 167, 105);
@@ -51,6 +77,9 @@
/* dark theme based text colors */
--textColor: rgb(209, 213, 219);
--dimTextColor: rgb(156, 163, 175);
--fullContrastColor: #fff;
--zeroContrastColor: #000;
--svgFilter: none;
/* textures */
--backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
@@ -60,27 +89,26 @@
--headerColorGradientAlt: linear-gradient(180deg, rgba(30, 40, 54, 1), 70%, transparent);
--headerBlurMask: linear-gradient(180deg, white 50%, 85%, transparent);
--cardFooterGradient: linear-gradient(0deg, rgb(0 0 0 / 90%), 40%, transparent);
--cardFooterGradient: linear-gradient(0deg, hsla(0, 0%, 5%, 0.95), 40%, transparent);
--topOSDGradient: linear-gradient(180deg, hsla(0, 0%, 0%, 0.8), 45%, hsla(0, 0%, 0%, 0));
--bottomOSDGradient: linear-gradient(0deg, hsla(0, 0%, 0%, 0.8), 45%, hsla(0, 0%, 0%, 0));
--hoverGradientV: linear-gradient(
0deg,
transparent,
rgb(255 255 255 / 35%) 45%,
rgb(255 255 255 / 35%) 55%,
hsla(0, 0%, 100%, 0.35) 45%,
hsla(0, 0%, 100%, 0.35) 55%,
transparent
);
--hoverGradientH: linear-gradient(
90deg,
transparent,
rgb(255 255 255 / 35%) 45%,
rgb(255 255 255 / 35%) 55%,
hsla(0, 0%, 100%, 0.35) 45%,
hsla(0, 0%, 100%, 0.35) 55%,
transparent
);
--itemBackdropMask: linear-gradient(180deg, rgba(0, 0, 0, 0.8), 75%, transparent);
/* --themeVideoPlayerMask: linear-gradient(180deg, rgba(0, 0, 0, 1), 85%, transparent); */
/* standard component sizes */
--largerRadius: 1.25em;
@@ -101,6 +129,8 @@
--blurLargest: blur(20px);
--shadow: 0.1em 0.1em 0.15em hsla(0, 0%, 0%, 0.3);
--cardShadow: 0 1px 6px 0px hsla(0, 0%, 0%, 0.3);
--iconShadow: 0px 0px 2px hsla(0, 0%, 0%, 0.8), 1px 1px 0px hsla(0, 0%, 0%, 0.5);
/* use "" to enable a fancy blur behind the app header / top bar [default];
use none (without quotes) to disable it */
@@ -181,12 +211,11 @@
--resumeCardScale: 1;
}
html {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 425;
font-style: normal;
-webkit-tap-highlight-color: transparent !important;
:root.layout-mobile {
--headerColorGradient: var(--headerColorGradientAlt);
--blurLargest: blur(12px);
--headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent);
--itemColumnGap: 0.4em;
}
body {
@@ -204,37 +233,10 @@ select {
--secondaryItemPageNegativeSpace: calc(60vh + 5em);
}
.layout-mobile {
--headerColorGradient: var(--headerColorGradientAlt);
--blurLargest: blur(12px);
--headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent);
--itemColumnGap: 0.5em;
}
.layout-mobile > body {
--secondaryItemPageNegativeSpace: 45vh;
}
/* Material Symbols Rounded - Minimal */
/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=add,airplay,album,arrow_back,arrow_forward,arrow_upward,audiotrack,autorenew,backspace,book,brightness_high,call_split,cast,check,chevron_left,chevron_right,clear,close,closed_caption,cloud_download,content_copy,dashboard,delete,devices_other,download,drag_handle,dvr,exit_to_app,expand_more,explore,fast_forward,fast_rewind,favorite,fiber_manual_record,fiber_smart_record,file_download,filter_alt,folder,folder_open,forward_30,fullscreen,get_app,groups,home,image,info,info_outline,keyboard,keyboard_arrow_down,keyboard_arrow_left,keyboard_arrow_right,keyboard_arrow_up,keyboard_return,library_add_check,live_tv,local_movies,lock,lyrics,menu,mode_edit,more_vert,movie,music_note,music_video,navigate_before,navigate_next,pause,pause_circle_filled,pause_circle_outline,person,phonelink_lock,photo,photo_album,picture_in_picture_alt,play,play_arrow,play_circle_filled,play_circle_outline,playlist_add,preview,queue,queue_music,quiz,redo,refresh,remove_circle,remove_red_eye,repeat,repeat_one,replay,replay_10,save,schedule,search,settings,shuffle,skip_next,skip_previous,sort_by_alpha,space_bar,star,stop,storage,subtitles,sync,text_decrease,text_increase,theaters,toc,tv,undo,update,video_library,videocam,view_comfy,volume_off,volume_up */
@font-face {
font-family: "Material Symbols Rounded Minimal";
font-style: normal;
font-weight: 100 700;
src: url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v346)
format("woff2");
}
/* Material Symbols Rounded - Full */
/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 */
@font-face {
font-family: "Material Symbols Rounded";
font-style: normal;
font-weight: 100 700;
src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v346/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2)
format("woff2");
}
.material-icons {
font-family:
var(--iconPack),
@@ -287,7 +289,7 @@ select {
}
::selection {
background: var(--activeColorAlpha);
background: var(--accentHoverColor);
}
.cardImageIcon {
@@ -300,14 +302,14 @@ select {
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: white !important;
border-color: var(--fullContrastColor) !important;
}
.mdl-radio__focus-circle,
.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle,
.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle {
background: var(--uiAccentColor);
color: var(--uiAccentColor);
background: var(--accentColor);
color: var(--accentColor);
}
.emby-button {
@@ -318,7 +320,7 @@ select {
.paper-icon-button-light.show-focus:focus,
.emby-tabs .emby-button.show-focus:focus {
background-color: var(--highlightOutlineColor) !important;
color: #fff !important;
color: var(--fullContrastColor) !important;
}
.emby-tabs .emby-button.show-focus:focus {
@@ -369,7 +371,7 @@ select {
border-radius: var(--largeRadius);
border: var(--darkerBorderColor) solid var(--borderWidthDouble) !important;
overflow: hidden !important;
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.4);
box-shadow: var(--cardShadow);
transition: transform 125ms;
}
@@ -431,7 +433,7 @@ select {
.card-hoverable:hover .cardScalable,
.card-hoverable:hover .visualCardBox {
border-color: white !important;
border-color: var(--fullContrastColor) !important;
}
.card-hoverable:hover .visualCardBox .cardScalable {
@@ -533,7 +535,7 @@ select {
.layout-desktop .cardOverlayButton-br > button {
color: white;
display: var(--extraCardButtonsVisibility);
text-shadow: var(--shadow);
text-shadow: var(--iconShadow);
}
.cardOverlayButton-br .cardOverlayButton-hover[data-action="menu"],
.layout-desktop .listItemButton[data-action="menu"] {
@@ -559,9 +561,8 @@ select {
.layout-mobile .cardOverlayButton-br[data-action="menu"] > .cardOverlayButtonIcon {
background-color: transparent !important;
color: white;
border: none;
text-shadow: 1px 1px 0.1em black;
text-shadow: var(--iconShadow);
color: white;
}
@@ -971,6 +972,8 @@ select {
padding: var(--padding);
transition: width 0.5s;
box-sizing: content-box;
scroll-snap-align: center;
scroll-snap-stop: always;
}
/* this makes the cards bigger and center aligned on older browsers */
@@ -999,7 +1002,7 @@ select {
.card .cardTextCentered {
/* text-align-last: left; */
text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.8);
text-shadow: var(--shadow);
}
.detailPageWrapperContainer {
@@ -1109,7 +1112,7 @@ select {
#itemDetailPage .emby-scroller,
#itemDetailPage .scrollX {
margin: 0 calc(-1 * var(--sidePadding));
padding-left: calc(var(--sidePadding));
padding-left: var(--sidePadding);
/* mask-image: linear-gradient(90deg, transparent, white var(--sidePadding), white calc(100vw - var(--sidePadding)), transparent); */
}
@@ -1121,7 +1124,9 @@ select {
.emby-scroller,
.scrollX {
padding-left: calc(var(--sidePadding));
padding-left: var(--sidePadding);
scroll-snap-type: x proximity;
scroll-padding-inline: var(--sidePadding);
}
.sectionTabs .scrollX {
@@ -1181,11 +1186,15 @@ select {
}
.starIcon {
background: linear-gradient(to right, #90cea1, #01b4e4);
--tmdb: linear-gradient(to right, #90cea1, #01b4e4);
--imdb: linear-gradient(to right, #f2db83, #dba506);
--colors: var(--tmdb);
background: var(--colors);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: -0.125em;
transform: translateY(-0.02em);
font-variation-settings: "FILL" 1 !important;
}
[dir="ltr"] .mediaInfoCriticRating {
@@ -1249,23 +1258,21 @@ select {
}
}
/* Theme video styling rolled back because jellyfin does not differentiate between the main video player and theme video playback nicely*/
/* .videoPlayerContainer {
body:not(.hide-scroll) > .videoPlayerContainer {
position: relative !important;
-webkit-mask: var(--themeVideoPlayerMask);
mask: var(--themeVideoPlayerMask);
height: 90vh;
-webkit-mask: var(--headerBlurMask);
mask: var(--headerBlurMask);
height: 80vh;
}
.layout-mobile .videoPlayerContainer {
.layout-mobile body:not(.hide-scroll) > .videoPlayerContainer {
height: 40vh;
z-index: 1;
height: 35vh;
}
.videoPlayerContainer>.htmlvideoplayer {
width: -webkit-fill-available;
object-fit: cover;
} */
.layout-desktop > body:not(.hide-scroll) > .videoPlayerContainer ~ #reactRoot > .backgroundContainer.withBackdrop {
opacity: 0.25;
}
.itemBackdrop {
display: block !important;
@@ -1398,6 +1405,7 @@ select {
display: grid;
/* this centers the title and other text on 10.11.0 */
text-align: center;
color: var(--textColor);
}
/* Both the blocks below position the poster in main media page in the center */
@@ -1649,6 +1657,7 @@ html,
.appfooter {
background-color: var(--headerColor) !important;
backdrop-filter: var(--blurLargest) !important;
color: var(--textColor);
}
.lyricPage {
@@ -1676,7 +1685,7 @@ html,
}
.buttonActive {
color: var(--uiAccentColor) !important;
color: var(--accentColor) !important;
}
#divRunningTasks progress {
@@ -1714,7 +1723,8 @@ html,
.itemProgressBarForeground {
border-radius: 0 var(--largeRadius) var(--largeRadius) 0;
background-color: var(--dimTextColor);
background-color: light-dark(var(--zeroContrastColor), var(--textColor));
opacity: 0.75;
}
.backgroundProgress > div,
@@ -1723,16 +1733,16 @@ html,
}
.playbackProgress > div {
background-color: var(--uiAccentColor);
background-color: var(--accentColor);
}
::-moz-progress-bar {
background: var(--uiAccentColor) !important;
background: var(--accentColor) !important;
border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
}
::-webkit-progress-value {
background: var(--uiAccentColor) !important;
background: var(--accentColor) !important;
border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
}
@@ -1745,7 +1755,7 @@ progress,
}
progress + span {
color: var(--uiAccentColor) !important;
color: var(--accentColor) !important;
}
.mdl-spinner__circle {
@@ -1852,10 +1862,19 @@ progress + span {
.selectLabel {
max-height: 2em;
color: var(--textColor);
}
.inputLabelUnfocused {
color: var(--textColor);
}
.inputLabelFocused {
color: var(--fullContrastColor);
}
.button-link {
color: rgb(200, 200, 200);
color: var(--dimTextColor);
}
.button-link:hover {
@@ -1864,7 +1883,7 @@ progress + span {
}
.button-link:active {
color: rgb(243, 243, 243) !important;
color: var(--fullContrastColor) !important;
text-decoration: none;
}
@@ -1884,7 +1903,7 @@ progress + span {
}
.btnHeaderSave.button-flat {
color: var(--uiAccentColor) !important;
color: var(--accentColor) !important;
gap: 0.3em;
border-radius: var(--smallRadius);
}
@@ -1912,14 +1931,10 @@ progress + span {
}
.itemExternalLinks {
color: var(--textColor);
}
.itemExternalLinks.focuscontainer-x {
color: transparent;
}
.itemExternalLinks.focuscontainer-x > .button-link {
.itemExternalLinks > .button-link {
color: var(--textColor);
background-color: var(--selectorBackgroundColor);
padding: 0.125em 0.5em;
@@ -1927,50 +1942,75 @@ progress + span {
margin-bottom: 0.5em;
}
.layout-mobile .itemExternalLinks.focuscontainer-x > .button-link:hover:not(:active) {
.layout-mobile .itemExternalLinks > .button-link:hover:not(:active) {
color: var(--textColor) !important;
}
.layout-desktop .itemExternalLinks.focuscontainer-x > a:hover,
.itemExternalLinks.focuscontainer-x > a:active {
background-color: var(--activeColor) !important;
.layout-desktop .itemExternalLinks > a:hover,
.itemExternalLinks > a:active {
background-color: var(--accentColor) !important;
color: white !important;
}
.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="themoviedb.org"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="themoviedb.org"]:active {
.layout-desktop .itemExternalLinks > a[href*="themoviedb.org"]:hover,
.itemExternalLinks > a[href*="themoviedb.org"]:active {
background-color: rgb(26, 183, 216) !important;
color: black !important;
}
.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="imdb.com"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="imdb.com"]:active {
.layout-desktop .itemExternalLinks > a[href*="imdb.com"]:hover,
.itemExternalLinks > a[href*="imdb.com"]:active {
background-color: rgb(226, 182, 22) !important;
color: black !important;
}
.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="thetvdb.com"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="thetvdb.com"]:active {
.layout-desktop .itemExternalLinks > a[href*="thetvdb.com"]:hover,
.itemExternalLinks > a[href*="thetvdb.com"]:active {
background-color: rgb(108, 213, 145) !important;
color: black !important;
}
.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="trakt.tv"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="trakt.tv"]:active {
.layout-desktop .itemExternalLinks > a[href*="trakt.tv"]:hover,
.itemExternalLinks > a[href*="trakt.tv"]:active {
background-color: rgb(171, 58, 173) !important;
color: var(--textColor) !important;
color: white !important;
}
.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="theaudiodb.com"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="theaudiodb.com"]:active {
.layout-desktop .itemExternalLinks > a[href*="theaudiodb.com"]:hover,
.itemExternalLinks > a[href*="theaudiodb.com"]:active {
background-color: rgb(99, 153, 204) !important;
color: rgb(15, 22, 28) !important;
}
.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="musicbrainz.org"]:hover,
.itemExternalLinks.focuscontainer-x > a[href*="musicbrainz.org"]:active {
.layout-desktop .itemExternalLinks > a[href*="musicbrainz.org"]:hover,
.itemExternalLinks > a[href*="musicbrainz.org"]:active {
background-color: rgb(186, 71, 143) !important;
color: var(--textColor) !important;
color: white !important;
}
/* Support for Jellyfin Enhanced (https://github.com/n00bcodr/Jellyfin-Enhanced) */
.layout-desktop .itemExternalLinks > a[href*="letterboxd.com"]:hover,
.itemExternalLinks > a[href*="letterboxd.com"]:active {
background-color: rgb(20, 24, 28) !important;
color: white !important;
}
.layout-desktop .itemExternalLinks > a[title*="Radarr"]:hover,
.itemExternalLinks > a[title*="Radarr"]:active {
background-color: rgb(255, 194, 48) !important;
color: black !important;
}
.layout-desktop .itemExternalLinks > a[title*="Sonarr"]:hover,
.itemExternalLinks > a[title*="Sonarr"]:active {
background-color: rgb(7, 186, 233) !important;
color: black !important;
}
.layout-desktop .itemExternalLinks > a[title*="Bazarr"]:hover,
.itemExternalLinks > a[title*="Bazarr"]:active {
background-color: var(--textColor) !important;
color: black !important;
}
.itemTags,
@@ -2062,7 +2102,7 @@ progress + span {
.innerCardFooter,
.chapterThumbTextContainer {
background: var(--cardFooterGradient);
text-shadow: 0.1em 0.1em 0px black;
text-shadow: var(--shadow);
padding: 0em 2em 2em 2em;
align-content: end;
display: grid;
@@ -2170,7 +2210,7 @@ progress + span {
border-radius: var(--smallerRadius) !important;
box-shadow: inset 0em 7em 10em 20px rgba(0, 0, 0, 0.8);
background: transparent;
border-color: white;
border-color: var(--fullContrastColor);
border-style: solid;
border-width: var(--borderWidthDouble);
outline: none;
@@ -2178,7 +2218,7 @@ progress + span {
@supports (display: revert) {
.emby-checkbox:checked + span + .checkboxOutline {
outline: solid var(--borderWidth) white;
outline: solid var(--borderWidth) var(--fullContrastColor);
}
}
@@ -2191,7 +2231,7 @@ progress + span {
.itemSelectionPanel .material-icons.check:before {
font-size: 4em;
color: #ffffff;
color: var(--fullContrastColor);
padding: 0.25em;
}
@@ -2272,7 +2312,7 @@ progress + span {
}
.emby-checkbox:focus + span + .checkboxOutline {
border-color: white !important;
border-color: var(--fullContrastColor) !important;
outline: var(--borderWidth) solid var(--highlightOutlineColor);
}
}
@@ -2344,10 +2384,10 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
.emby-button.block,
.button-alt,
.raised,
#btnDeleteImage,
.raised:focus,
.manageRecordingButton,
.dashboardActionsContainer > .emby-button {
color: #fff;
color: var(--fullContrastColor);
border-radius: var(--smallRadius);
background: var(--lighterGradientPoint);
border: var(--defaultBorder);
@@ -2364,7 +2404,7 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
}
.fab {
color: #fff;
color: var(--fullContrastColor);
background: var(--lighterGradientPoint);
border: var(--defaultBorder);
}
@@ -2374,15 +2414,10 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
filter: brightness(1.2);
}
.raised:focus {
background: inherit;
filter: brightness(1.2);
}
.raised:active,
.fab:active,
.emby-button:active {
filter: brightness(1.2) !important;
filter: brightness(1.05) !important;
transform: scale(0.98);
}
@@ -2408,6 +2443,14 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
transform: scale(1.25);
}
.cardScalable .material-icons.more_vert:before {
font-variation-settings:
"FILL" 1,
"wght" 700,
"GRAD" 0,
"opsz" 35;
}
.emby-button[title="Favorite"] .material-icons.favorite:before {
font-variation-settings:
"FILL" 1,
@@ -2427,18 +2470,18 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
}
.layout-desktop .detailButton:not(.btnPlay):hover {
color: black;
color: var(--zeroContrastColor);
background: var(--dimTextColor);
}
.detailButton:active {
color: black;
color: var(--zeroContrastColor);
background: var(--textColor);
}
.btnPlay.detailButton {
background-color: var(--textColor);
color: black;
color: var(--zeroContrastColor);
border-radius: 3em;
border-color: var(--borderColor);
height: 3em;
@@ -2497,31 +2540,40 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
.localnav > .emby-button {
background: var(--lighterGradientPoint) !important;
color: #fff;
color: var(--fullContrastColor);
padding: 0.8em 0.8em;
}
div[data-role="controlgroup"] a.ui-btn-active {
background: var(--selectorBackgroundColor) !important;
color: #fff !important;
color: var(--fullContrastColor) !important;
}
.guide-date-tab-button.emby-tab-button-active,
.guide-date-tab-button:focus {
color: white;
color: var(--fullContrastColor);
}
#btnDeleteImage,
.button-delete,
.btnRevoke,
#btnShutdown {
background: var(--btnDeleteColor);
background: var(--btnDeleteColor) !important;
border: solid var(--btnDeleteBorderColor) var(--borderWidth);
color: white !important;
}
.button-submit {
background: var(--btnSubmitColor) !important;
border: solid var(--btnSubmitBorderColor) var(--borderWidth) !important;
color: white !important;
}
.userPreferencesPage .button-submit {
position: sticky !important;
bottom: calc(1em + max(env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 1px)));
box-shadow: 0 0.75em 2em 3em var(--darkerGradientPoint);
z-index: 2 !important;
}
.collapseContent,
@@ -2529,6 +2581,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
.formDialogHeader:not(.formDialogHeader-clear) {
background-color: var(--headerColor);
backdrop-filter: var(--blurDefault);
color: var(--textColor);
}
.paperList {
@@ -2552,6 +2605,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
.listItemIcon:not(.listItemIcon-transparent) {
background-color: var(--lighterGradientPoint) !important;
color: var(--textColor);
}
.listItemIcon.notification_important {
@@ -2563,7 +2617,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
.listItemIcon.schedule:not(.listItemIcon-transparent),
.listItemIcon.person:not(.listItemIcon-transparent),
.listItemIcon.live_tv:not(.listItemIcon-transparent) {
background-color: rgb(41, 49, 83) !important;
background-color: var(--darkerGradientPoint) !important;
border: var(--defaultBorder);
}
@@ -2612,7 +2666,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
}
.listItem[data-type="Audio"]:has(.playlistIndexIndicatorImage) .listItemBodyText {
color: white;
color: var(--fullContrastColor);
font-weight: 600;
}
@@ -2693,7 +2747,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
}
.Mui-selected {
background-color: var(--activeColor) !important;
background-color: var(--accentColor) !important;
}
.actionsheetDivider {
@@ -2722,7 +2776,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
} */
.actionSheetMenuItem:has(.listItemIcon.check) {
background-color: var(--activeColor);
background-color: var(--accentColor);
}
.actionSheetMenuItem:has(.listItemIcon.check) .listItemBodyText {
@@ -2757,7 +2811,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
}
.navMenuOption-selected {
background-color: var(--activeColor) !important;
background-color: var(--accentColor) !important;
}
#itemDetailPage .detailSection {
@@ -2769,9 +2823,10 @@ div[data-role="controlgroup"] a.ui-btn-active {
margin-bottom: 1.5em;
}
/* .layout-mobile .detailSection {
grid-template-columns: 1fr !important;
} */
/* Support .tmdb-review-swipe-container for Jellyfin Enhanced (https://github.com/n00bcodr/Jellyfin-Enhanced) */
.tmdb-review-swipe-container {
max-width: 93vw;
}
.detailPageContent {
gap: 1em;
@@ -2829,18 +2884,22 @@ div[data-role="controlgroup"] a.ui-btn-active {
.selectVideoContainer.trackSelectionFieldContainer > label {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23d1d5db" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M2 12c0-4.7 0-7 1.5-8.5C4.9 2 7.3 2 12 2s7 0 8.5 1.5C22 4.9 22 7.3 22 12s0 7-1.5 8.5C19.1 22 16.7 22 12 22s-7 0-8.5-1.5C2 19.1 2 16.7 2 12Z"/><path stroke-linecap="round" d="M17 2.5v19M7 2.5v19M2.5 7H7m14.5 0H17M2.5 17H7m14.5 0H17M2 12h20"/></g></svg>');
filter: var(--svgFilter);
}
.selectAudioContainer.trackSelectionFieldContainer > label {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23d1d5db" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M9 19a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM21 17a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9 19V8M21 17V6"/><path stroke-linecap="round" d="m15.7 3.8-4 1.3c-1.3.4-2 .6-2.3 1.2C9 6.8 9 7.5 9 8.9V12l12-4v-.5c0-2.5 0-3.7-.8-4.3-.9-.6-2-.2-4.5.6Z"/></g></svg>');
filter: var(--svgFilter);
}
.selectSubtitlesContainer.trackSelectionFieldContainer > label {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23d1d5db" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M2 12c0-3.8 0-5.7 1.2-6.8C4.3 4 6.2 4 10 4h4c3.8 0 5.7 0 6.8 1.2C22 6.3 22 8.2 22 12s0 5.7-1.2 6.8C19.7 20 17.8 20 14 20h-4c-3.8 0-5.7 0-6.8-1.2C2 17.7 2 15.8 2 12Z"/><path stroke-linecap="round" d="M10 16H6M14 13h4M14 16h-1.5M9.5 13h2M18 16h-1.5M6 13h1"/></g></svg>');
filter: var(--svgFilter);
}
.selectSourceContainer.trackSelectionFieldContainer > label {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23d1d5db" d="m15.4 4.05-.5.56.5-.56Zm3.95 3.57-.5.55.5-.55Zm2.3 2.53-.68.3.68-.3ZM3.17 20.83l.53-.53-.53.53Zm17.66 0-.53-.53.53.53Zm-6.83.42h-4v1.5h4v-1.5ZM2.75 14v-4h-1.5v4h1.5Zm18.5-.44V14h1.5v-.44h-1.5Zm-6.36-8.95 3.96 3.56 1-1.11L15.9 3.5l-1 1.11Zm7.86 8.95c0-1.69.02-2.75-.41-3.71l-1.37.6c.26.6.28 1.3.28 3.11h1.5Zm-3.9-5.39c1.35 1.22 1.85 1.7 2.12 2.29l1.37-.61c-.43-.96-1.23-1.66-2.49-2.8l-1 1.12Zm-8.82-5.42c1.58 0 2.18.01 2.71.22l.54-1.4c-.85-.33-1.78-.32-3.25-.32v1.5Zm5.86.75c-1.08-.98-1.76-1.6-2.61-1.93l-.54 1.4c.53.2.98.59 2.15 1.64l1-1.11ZM10 21.25c-1.9 0-3.26 0-4.29-.14-1-.13-1.58-.39-2-.81l-1.07 1.06c.75.75 1.7 1.08 2.87 1.24 1.15.15 2.63.15 4.49.15v-1.5ZM1.25 14c0 1.86 0 3.34.15 4.49a4.71 4.71 0 0 0 1.24 2.87L3.7 20.3c-.42-.43-.67-1-.81-2.01A36 36 0 0 1 2.75 14h-1.5ZM14 22.75c1.86 0 3.34 0 4.49-.15a4.71 4.71 0 0 0 2.87-1.24L20.3 20.3c-.43.42-1 .68-2.01.81-1.03.14-2.38.14-4.29.14v1.5ZM21.25 14c0 1.9 0 3.26-.14 4.29-.13 1-.39 1.58-.81 2l1.06 1.07a4.71 4.71 0 0 0 1.24-2.87c.15-1.15.15-2.63.15-4.49h-1.5Zm-18.5-4c0-1.9 0-3.26.14-4.29.14-1 .39-1.58.81-2L2.64 2.63A4.71 4.71 0 0 0 1.4 5.51c-.15 1.15-.15 2.63-.15 4.49h1.5Zm7.28-8.75c-1.87 0-3.36 0-4.51.15a4.72 4.72 0 0 0-2.88 1.24L3.7 3.7c.42-.42 1-.67 2.02-.81 1.03-.14 2.4-.14 4.31-.14v-1.5Z"/><path stroke="%23d1d5db" stroke-width="1.5" d="M13 2.5V5c0 2.36 0 3.54.73 4.27.73.73 1.91.73 4.27.73h4"/></svg>');
filter: var(--svgFilter);
}
.detailSectionContent a:not(.overview-expand) {
@@ -2938,10 +2997,17 @@ div[data-role="controlgroup"] a.ui-btn-active {
.layout-tv .nextUpSection,
.layout-tv .detailSection > #listChildrenCollapsible,
.collectionItems,
.programGuideSection {
.programGuideSection,
/* Support .series-episodes-section for KefinTweaks (https://github.com/ranaldsgift/KefinTweaks) */
.series-episodes-section,
.series-episodes-section ~ #listChildrenCollapsible {
grid-column: 1 / -1;
}
.series-episodes-section {
order: 4;
}
.collectionItems {
order: 2;
}
@@ -2973,11 +3039,11 @@ div[data-role="controlgroup"] a.ui-btn-active {
.alphaPickerButton {
font-family: monospace;
margin: 0.15em;
color: rgba(255, 255, 255, 0.25);
color: var(--dimTextColor);
}
.alphaPickerButton-selected {
color: rgba(255, 255, 255, 1);
color: var(--zeroContrastColor) !important;
}
.alphaPicker-vertical {
@@ -3064,7 +3130,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
background: var(--selectorBackgroundColor) !important;
}
.verticalSection {
.verticalSection:not(:empty) {
margin-top: 0.5em;
margin-bottom: 1em;
}
@@ -3078,7 +3144,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
}
.sectionTitleTextButton:active {
color: white !important;
color: var(--fullContrastColor) !important;
}
.sectionTitleContainer-cards {
@@ -3114,6 +3180,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
width: 1.5rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23D1D5DB' aria-hidden='true'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E")
no-repeat center center;
filter: var(--svgFilter);
background-size: contain;
/* Stops miscalculating the size on hover effect */
}
@@ -3149,7 +3216,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
}
.upNextContainer .upNextDialog-countdownText {
color: white;
color: var(--fullContrastColor);
}
.skip-button-container {
@@ -3161,7 +3228,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
box-shadow: var(--shadow);
margin-right: var(--sidePadding);
border-radius: 3em;
color: black;
color: var(--zeroContrastColor);
}
/* this allows the skip button get focused correctly on TVs using remote navigation; needs 10.10.7*/
@@ -3171,7 +3238,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
}
.skip-button:hover {
background-color: white;
background-color: var(--fullContrastColor);
}
.skip-button:active {
@@ -3181,6 +3248,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
.toast,
.upNextContainer {
color: var(--textColor);
background: var(--headerColor) !important;
border: var(--defaultBorder) !important;
backdrop-filter: var(--blurDefault);
@@ -3196,8 +3264,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
@media (hover: hover) and (pointer: fine) {
.paper-icon-button-light:hover:not(:disabled) {
color: #fff;
background-color: rgb(255 255 255 / 5%);
color: white;
}
.actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check[style*="hidden"]):hover {
@@ -3217,16 +3284,16 @@ div[data-role="controlgroup"] a.ui-btn-active {
.button-flat:hover {
background-color: rgba(255, 255, 255, 0.2);
color: white;
color: var(--fullContrastColor);
}
.btnPlay.detailButton:hover {
background-color: var(--textColor);
color: black;
color: var(--zeroContrastColor);
}
.alphaPickerButton:hover {
color: rgba(255, 255, 255, 1);
color: var(--fullContrastColor);
}
.listItem:hover {
@@ -3249,17 +3316,17 @@ div[data-role="controlgroup"] a.ui-btn-active {
.sectionTitleTextButton:hover {
background: transparent !important;
color: white !important;
color: var(--fullContrastColor) !important;
}
.button-link:hover {
color: rgb(243, 243, 243) !important;
color: var(--textColor) !important;
text-decoration: none;
}
}
.paper-icon-button-light:active:not(:disabled) {
color: #fff;
color: white;
background-color: rgb(255 255 255 / 5%);
}
@@ -3285,7 +3352,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
.inputLabelFocused,
.selectLabelFocused,
.textareaLabelFocused {
color: #fff;
color: var(--fullContrastColor);
}
.emby-select-withcolor:focus,
@@ -3348,7 +3415,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
font-size: 4em;
white-space: pre-wrap;
padding-bottom: 0.5ch;
color: white;
color: var(--fullContrastColor);
}
.nameContainer > h1.itemName,
@@ -3547,7 +3614,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
}
.progressring-spiner {
border-color: var(--uiAccentColor);
border-color: var(--accentColor);
}
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.semiTransparent.noHeaderRight {
@@ -3605,7 +3672,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
margin-bottom: -1em;
font-size: 1.875em;
font-weight: 800;
color: white;
color: var(--fullContrastColor);
text-align: center;
}
@@ -3661,7 +3728,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
}
.filterIndicator {
background: var(--activeColor);
background: var(--accentColor);
}
/* this :not() is needed to prevent affecting the mixed media libraries on the home page */
@@ -3834,16 +3901,16 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
}
.MuiTabs-flexContainer > .MuiButtonBase-root.Mui-selected {
color: white;
color: var(--fullContrastColor);
background-color: transparent !important;
}
.MuiToggleButtonGroup-grouped.Mui-selected {
color: white;
color: var(--fullContrastColor);
}
.MuiButtonBase-root.MuiIconButton-root:hover {
color: white;
color: var(--fullContrastColor);
background-color: transparent;
}
@@ -3903,7 +3970,8 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
.skinHeader-withBackground.semiTransparent .headerButton,
.skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) .headerButton {
text-shadow: 1px 1px 0 #00000080;
text-shadow: var(--iconShadow);
color: white;
}
/* this keeps the header elements aligned when its height is modified */
@@ -3968,7 +4036,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
.sectionTabs .emby-tab-button-active {
margin: 0.25em 0.5em;
color: black;
color: var(--zeroContrastColor);
background-color: var(--textColor);
}
@@ -4048,7 +4116,15 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
container-name: skinHeader;
container-type: size;
height: var(--appBarHeight);
max-height: var(--appBarHeight);
position: sticky;
top: 0;
z-index: 1099;
}
.touch-menu-la {
height: 100vh;
height: 100dvh;
z-index: 1099;
}
@container skinHeader (min-height: 4.9em) {
@@ -4086,6 +4162,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
.skinHeader {
/* this is for testing a fix for iOS */
padding-top: max(env(safe-area-inset-top), var(--safe-area-inset-top)) !important;
color: var(--textColor);
}
.nowPlayingPage {
@@ -4177,7 +4254,7 @@ for extended styling, use the add-on */
.detail-button:hover,
.favorite-button:hover {
background: var(--dimTextColor);
color: black;
color: var(--zeroContrastColor);
}
/* basic styling for the Media Bar Plugin - end */
@@ -19,7 +19,7 @@
order: 2;
}
.backdrop,
.backdrop:not(.tmla-mask),
.backdrop-container,
.backdrop-overlay {
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
@@ -27,7 +27,7 @@
background-color: transparent;
}
.backdrop {
.backdrop:not(.tmla-mask) {
transform-origin: center left;
}
@@ -63,7 +63,7 @@
top: 10vh;
}
.backdrop,
.backdrop:not(.tmla-mask),
.backdrop-container,
.backdrop-overlay {
mask-image: none;
@@ -163,7 +163,7 @@
top: calc(100% - 15em);
}
.backdrop {
.backdrop:not(.tmla-mask) {
transform-origin: center;
}
-9
View File
@@ -5,15 +5,6 @@ module.exports = {
plugins: [
cssDeclarationSorter({
keepOverrides: true,
order: (a, b) => {
const aVar = a.startsWith('--');
const bVar = b.startsWith('--');
if (aVar && !bVar) return -1;
if (!aVar && bVar) return 1;
return a.localeCompare(b);
},
}),
cssnano({
preset: 'default',