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>
This commit is contained in:
lscambo13andMacley authored and GitHub committed 2026-06-08 19:39:23 +05:30
1 parent c8ef5af7de
commit 7381e6358f
1 file changed
+40 -20
+40 -20
View File
@@ -1912,14 +1912,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,52 +1923,76 @@ 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 {
.layout-desktop .itemExternalLinks > a:hover,
.itemExternalLinks > a:active {
background-color: var(--activeColor) !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;
}
.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;
}
.layout-desktop .itemExternalLinks > a[href*="letterboxd.com"]:hover,
.itemExternalLinks > a[href*="letterboxd.com"]:active {
background-color: rgb(20, 24, 28) !important;
color: var(--textColor) !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,
.itemTags > a {
display: none;