diff --git a/README.md b/README.md
index a5901f0..ab66726 100644
--- a/README.md
+++ b/README.md
@@ -2,84 +2,134 @@
 
 A custom and a personal interpretation CSS theme for Jellyfin.
 
+![Film library overview](img/film-library.png)
+
 ## How to use?
 
-### `icon-fix.css`
-`icon-fix.css` is to fix Font Awesome Light icons related issues. To load it:
+Load any CSS file you want using jsDelivr directly inside your settings (*Dashboard/General/Custom CSS code*). In the following replace `{filename}` with the CSS file you need.
 
 ```css
-@import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/icon-fix.css");
+@import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/{filename}.css");
+```
+
+### `animation.css`
+Creates an animation for the favorite and watched buttons in some context. Typically on the detail page. To load it:
+
+```css
+@import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/animation.css");
 ```
 
 ### `backdrop-blur.css`
-`backdrop-blur.css` adds a background blur effect when navigating Jellyfin. To load it:
+Adds a background blur effect when navigating Jellyfin. To load it:
 
 ```css
 @import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/backdrop-blur.css");
 ```
 
+![Detail page](./img/detail-page.png)
+
 ### `badge.css`
-`badge.css` change the design of the badges (used in the dashboard mainly). To load it:
+Changes the design of the badges (used in the dashboard mainly). To load it:
 
 ```css
 @import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/badge.css");
 ```
 
+![Dashboard view focused on badges](./img/dashboard-badges.png)
+
+### `button-icon.css`
+Changes the appearance of icon-only buttons. It mainly removes the background color on hover. To load it:
+
+```css
+@import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/button-icon.css");
+```
+
 ### `button.css`
-`button.css` creates a pretty 3D effect on buttons when hovering them among some little fixes. To load it:
+Creates a 3D effect on block buttons when hovering them among some other little fixes. To load it:
 
 ```css
 @import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/button.css");
 ```
 
+![Block buttons hovered](./img/block-buttons.png)
+
 ### `card.css`
-`card.css` changes different elements in the cards (used to present medias) mainly the border radius. To load it:
+Changes different elements in the cards (used to present medias) but mainly the border radius. To load it:
 
 ```css
 @import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/card.css");
 ```
 
+![Favorite tab focused on media cards](./img/favorite-tab.png)
+
 ### `color.css`
-`color.css` replaces accentuation colors by others. To load it:
+Replaces accentuation colors by others. To load it:
 
 ```css
 @import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/color.css");
 ```
 
+### `icon-fix.css`
+Fixes Font Awesome Light icons related issues. To load it:
+
+```css
+@import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/icon-fix.css");
+```
+
 ### `input.css`
-`input.css` slightly modifies text input, text area input and select input design. To load it:
+Slightly modifies text input, text area input and select input design. To load it:
 
 ```css
 @import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/input.css");
 ```
 
+![Dashboard view focused on inputs](./img/dashboard-inputs.png)
+
 ### `jellyfin-custom-theme.css`
-General and little modifications of Jellyfin. To load it:
+General and verious modifications of Jellyfin. To load it:
 
 ```css
 @import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/jellyfin-custom-theme.css");
 ```
 
 ### `keywords-position.css` (does not work)
-Attempt to move the keywords and metadata providers links in the media detail pages below the poster. To load it:
+Attempts to move the keywords and metadata providers links in the media detail pages below the poster. To load it:
 
 ```css
 @import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/keywords-position.css");
 ```
 
-It works badly though.
+**Note:** It works badly though.
+
+### `media-player.css`
+Styles the media player progression bar. To load it:
+
+```css
+@import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/media-player.css");
+```
+
+### `tooltip.css`
+Adds a tooltip for icon-only buttons in some context (in the header, on detail page etc.). To load it:
+
+```css
+@import url("https://cdn.jsdelivr.net/gh/Nicryc/jellyfin-meduse@main/tooltip.css");
+```
 
 ## Recommendation
-I recommend to load the file in this order:
+I recommend to load the files in this order:
 1. `jellyfin-custom-theme` (mandatory since it imports other CSS files)
 2. `icon-fix`
 3. `input`
 4. `button`
 5. `card`
-6. `color`
-7. `badge`
-8. `backdrop-blur`
-9. `keywords-position`
+6. `media-player`
+7. `tooltip`
+8. `button-icon`
+9. `color`
+10. `badge`
+11. `backdrop-blur`
+12. `animation`
+13. `keywords-position`
 
 ## Note
 This theme doesn't intend to be cross-browser compatible and is only tested with Firefox.
\ No newline at end of file
diff --git a/animation.css b/animation.css
new file mode 100644
index 0000000..d7dd73c
--- /dev/null
+++ b/animation.css
@@ -0,0 +1,215 @@
+/* Remove background on buttons Favorite, Watched and More */
+.cardOverlayButton[data-isfavorite]:hover, /* :has(span.favorite) */
+.cardOverlayButton[data-played]:hover, /* :has(span.check) */
+.cardOverlayButton[data-action="menu"]:hover /* :has(span.more_vert) */ {
+    background-color: transparent !important;
+}
+
+/* Increase the font weight when is watched or is favorite (fulfilled heart) */
+.ratingbutton-withrating .ratingbutton-icon-withrating,
+.playstatebutton-played .playstatebutton-icon-played {
+    font-weight: 900;
+}
+
+/* Allow animation to overflow the button limits (otherwise it is not visible) */
+.cardOverlayButton, .listItemButton {
+    overflow: visible;
+}
+
+/* Center the animation origin using flexbox workaround */
+span.detailButton-icon.favorite,
+span.detailButton-icon.check,
+button.listItemButton[data-isfavorite] span.material-icons.favorite,
+button.listItemButton[data-played] span.material-icons.check {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/********************************************/
+/* Key frames definitions (animation steps) */
+/********************************************/
+
+@keyframes heart {
+    0%,
+    17.5% {
+        font-size: 0;
+    }
+}
+
+@keyframes check {
+    0%,
+    17.5% {
+        font-size: 0;
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes bubble {
+    15% {
+        transform: scale(1);
+        border-color: #cc8ef5;
+        border-width: 1.75rem;
+    }
+
+    30%,
+    100% {
+        transform: scale(1);
+        border-color: #cc8ef5;
+        border-width: 0;
+    }
+}
+
+@keyframes particles {
+    0%,
+    20% {
+        opacity: 0;
+    }
+
+    25% {
+        opacity: 1;
+        box-shadow: 0.25981rem -1.9rem 0 0rem #ff8080,
+            -0.25981rem -1.6rem 0 0rem #ffed80,
+            1.64747rem -0.9815rem 0 0rem #ffed80,
+            1.08894rem -1.20071rem 0 0rem #a4ff80,
+            1.79455rem 0.67608rem 0 0rem #a4ff80,
+            1.6177rem 0.10274rem 0 0rem #80ffc8,
+            0.5903rem 1.82457rem 0 0rem #80ffc8,
+            0.92829rem 1.32882rem 0 0rem #80c8ff,
+            -1.05846rem 1.59911rem 0 0rem #80c8ff,
+            -0.46014rem 1.55428rem 0 0rem #a480ff,
+            -1.91018rem 0.1695rem 0 0rem #a480ff,
+            -1.50207rem 0.60933rem 0 0rem #ff80ed,
+            -1.32349rem -1.38776rem 0 0rem #ff80ed,
+            -1.41292rem -0.79446rem 0 0rem #ff8080;
+    }
+}
+
+/***********************************************************/
+/******************** Common components ********************/
+/***********************************************************/
+/*  Currently there is an animation for the watched and    */
+/*  favorite buttons (check and heart) on the detail page, */ 
+/*  on the card overlay and on the TV show episodes list   */
+/***********************************************************/
+
+button.cardOverlayButton[data-isfavorite].ratingbutton-withrating::before,
+button.cardOverlayButton[data-isfavorite].ratingbutton-withrating::after,
+button.cardOverlayButton[data-played].playstatebutton-played::before,
+button.cardOverlayButton[data-played].playstatebutton-played::after,
+button.detailButton[data-isfavorite].ratingbutton-withrating div::before,
+button.detailButton[data-isfavorite].ratingbutton-withrating div::after,
+button.detailButton[data-played].playstatebutton-played div::before,
+button.detailButton[data-played].playstatebutton-played div::after,
+button.listItemButton[data-isfavorite].ratingbutton-withrating::before,
+button.listItemButton[data-isfavorite].ratingbutton-withrating::after,
+button.listItemButton[data-played].playstatebutton-played::before,
+button.listItemButton[data-played].playstatebutton-played::after {
+    /* will-change: font-size; */
+    animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
+    animation-timing-function: ease-out;
+}
+
+button.cardOverlayButton[data-isfavorite].ratingbutton-withrating::before,
+button.cardOverlayButton[data-played].playstatebutton-played::before,
+button.detailButton[data-isfavorite].ratingbutton-withrating div::before,
+button.detailButton[data-played].playstatebutton-played div::before,
+button.listItemButton[data-isfavorite].ratingbutton-withrating::before,
+button.listItemButton[data-played].playstatebutton-played::before {
+    /* will-change: transform, border-width, border-color; */
+    animation-name: bubble;
+}
+
+button.cardOverlayButton[data-isfavorite].ratingbutton-withrating::after,
+button.cardOverlayButton[data-played].playstatebutton-played::after,
+button.detailButton[data-isfavorite].ratingbutton-withrating div::after,
+button.detailButton[data-played].playstatebutton-played div::after,
+button.listItemButton[data-isfavorite].ratingbutton-withrating::after,
+button.listItemButton[data-played].playstatebutton-played::after {
+    /* will-change: opacity, box-shadow; */
+    animation-name: particles;
+}
+
+button.cardOverlayButton[data-isfavorite]::before,
+button.cardOverlayButton[data-isfavorite]::after,
+button.detailButton[data-isfavorite] div::before,
+button.detailButton[data-isfavorite] div::after,
+button.cardOverlayButton[data-played]::before,
+button.cardOverlayButton[data-played]::after,
+button.detailButton[data-played] div::before,
+button.detailButton[data-played] div::after,
+button.listItemButton[data-isfavorite]::before,
+button.listItemButton[data-isfavorite]::after,
+button.listItemButton[data-played]::before,
+button.listItemButton[data-played]::after {
+    position: absolute;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    border-radius: 50%;
+    content: '';
+}
+
+button.cardOverlayButton[data-isfavorite]::before,
+button.detailButton[data-isfavorite] div::before,
+button.cardOverlayButton[data-played]::before,
+button.detailButton[data-played] div::before,
+button.listItemButton[data-isfavorite]::before,
+button.listItemButton[data-played]::before {
+    box-sizing: border-box;
+    margin: -1.75rem;
+    border: solid 1.75rem #e2264d;
+    width: 3.5rem;
+    height: 3.5rem;
+    transform: scale(0);
+}
+
+button.cardOverlayButton[data-isfavorite]::after,
+button.detailButton[data-isfavorite] div::after,
+button.cardOverlayButton[data-played]::after,
+button.detailButton[data-played] div::after,
+button.listItemButton[data-isfavorite]::after,
+button.listItemButton[data-played]::after {
+    margin: -0.15rem;
+    width: 0.3rem;
+    height: 0.3rem;
+    box-shadow: 0.25981rem -2.3375rem 0 -0.15rem #ff8080,
+        -0.25981rem -2.0375rem 0 -0.15rem #ffed80,
+        1.98952rem -1.25428rem 0 -0.15rem #ffed80,
+        1.43099rem -1.47349rem 0 -0.15rem #a4ff80,
+        2.22108rem 0.77344rem 0 -0.15rem #a4ff80,
+        2.04423rem 0.20009rem 0 -0.15rem #80ffc8,
+        0.78012rem 2.21874rem 0 -0.15rem #80ffc8,
+        1.11812rem 1.723rem 0 -0.15rem #80c8ff,
+        -1.24828rem 1.99329rem 0 -0.15rem #80c8ff,
+        -0.64996rem 1.94845rem 0 -0.15rem #a480ff,
+        -2.33671rem 0.26685rem 0 -0.15rem #a480ff,
+        -1.9286rem 0.70668rem 0 -0.15rem #ff80ed,
+        -1.66554rem -1.66053rem 0 -0.15rem #ff80ed,
+        -1.75497rem -1.06723rem 0 -0.15rem #ff8080;
+}
+
+/***************************************/
+/** Favorite animation specific rules **/
+/***************************************/
+
+button.cardOverlayButton[data-isfavorite].ratingbutton-withrating span::before,
+button.detailButton[data-isfavorite].ratingbutton-withrating div span::before,
+button.listItemButton[data-isfavorite].ratingbutton-withrating span::before {
+    color: #e2264d;
+    /* will-change: font-size; */
+    animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
+}
+
+/**************************************/
+/** Watched animation specific rules **/
+/**************************************/
+
+button.cardOverlayButton[data-played].playstatebutton-played span::before,
+button.detailButton[data-played].playstatebutton-played div span,
+button.detailButton[data-played].playstatebutton-played div span::before,
+button.listItemButton[data-played].playstatebutton-played span::before {
+    color: #5dd000;
+    /* will-change: font-size, transform; */
+    animation: check 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
+}
\ No newline at end of file
diff --git a/backdrop-blur.css b/backdrop-blur.css
index 09e8cf1..5c924c1 100644
--- a/backdrop-blur.css
+++ b/backdrop-blur.css
@@ -8,16 +8,6 @@
     background-color: rgba(0, 0, 0, 0.65);
 }
 
-/* Remove the dark background created by .itemBackdrop */
-.layout-desktop .itemBackdrop::after {
-    background: none;
-}
-
-/* Remove the upper background image in media detail pages */
-.itemBackdrop {
-    background-image: none !important;
-}
-
 /* Remove the title section background to make it transparent in media detail pages */
 .detailPagePrimaryContainer {
     background: none;
@@ -26,4 +16,25 @@
 /* Remove the header background to make it transparent only in media detail pages */
 .skinHeader.semiTransparent.skinHeader-blurred {
     background: none;
+}
+
+/* Between 62.5 and 68.75 em */
+@media (min-width: 62.5em) and (max-width: 68.75em) {
+    /* Force the display of the film logo */
+    .detailLogo {
+        display: initial;
+    }
+}
+
+/* On wide screens (bigger than 62.5em) */
+@media (min-width: 62.5em) {
+    /* Remove the upper background image in media detail pages */
+    .itemBackdrop {
+        background-image: none !important;
+    }
+
+    /* Remove the dark background created by .itemBackdrop */
+    .layout-desktop .itemBackdrop::after {
+        background: none;
+    }
 }
\ No newline at end of file
diff --git a/badge.css b/badge.css
index a9ca6f5..9686d5c 100644
--- a/badge.css
+++ b/badge.css
@@ -1,10 +1,11 @@
-/* Rework every notification badges such as the ones found in "Notifications", Tâches planifiées" or "Activité" */
+/* Rework every notification badges such as the ones found in "Notifications", "Tâches planifiées" or "Activité" */
 .paperList .material-icons.listItemIcon, 
 .subtitleList .material-icons.listItemIcon {
     background-color: #2f5d62 !important;
     width: 2em !important;
     line-height: 2em !important;
     border-radius: 10px !important;
+    font-size: 1.15em !important;
 }
 
 /* Change the padding of .paperList to align the badges better */
diff --git a/button-icon.css b/button-icon.css
new file mode 100644
index 0000000..a4053a3
--- /dev/null
+++ b/button-icon.css
@@ -0,0 +1,43 @@
+/* Change the main color accentuation when hovering buttons */
+@media (hover: hover) and (pointer: fine) {
+
+    /* Remove background when hovering for all buttons except for the ones inside a .listItem and the "Play" button on cards */
+    :not(.listItem) > .paper-icon-button-light:hover:not(:disabled):not([data-action="resume"]) {
+        color: rgba(255, 255, 255, 1);
+        background-color: transparent;
+    }
+
+    /* Change background color for buttons in a .listItem*/
+    .listItem>button {
+        border: 1px dashed transparent;
+        transition: none;
+    }
+
+    /* Change background color for buttons in a .listItem*/
+    .listItem > button:hover {
+        color: rgba(255, 255, 255, 1) !important;
+        background-color: transparent !important;
+        border-color: white;
+        border-radius: 0.9em;
+        transition: none;
+    }
+
+    /* Increase font size (of the icon) when hovering certain buttons */
+    /* .emby-input-iconbutton:hover,
+    .btnCardOptions:hover,
+    .btnOptions:hover,
+    .btnUserMenu:hover,
+    .btnCardMenu:hover,
+    .btnDeviceMenu:hover,
+    .emby-select-iconbutton:hover {
+
+        .material-icons {
+            font-weight: 900;
+        }
+    } */
+
+    /* Also change color when hovering the "More" button in detail page (it does not have class .paper-icon-button-light) */
+    .button-flat.detailButton:hover {
+        color: rgba(255, 255, 255, 1);
+    }
+}
\ No newline at end of file
diff --git a/button.css b/button.css
index 356f003..353930c 100644
--- a/button.css
+++ b/button.css
@@ -1,4 +1,4 @@
-@media all and (min-width: 100em) {
+@media all and (min-width: 100em) and (hover: hover) {
 
     /* Change fab (round) buttons icon color when hovering */
     .emby-button.fab:hover {
@@ -6,67 +6,22 @@
         background-color: #404040;
     }
 
-    /***************************************************************/
-    /*     emby-button 3D effect hovering using existing span      */
-    /*               — used for every square buttons               */
-    /*            except little ones in section titles             */
-    /*                    like help or delete —                    */
-    /***************************************************************/
-
-    .emby-button.raised:not(.button-alt):not(.button-delete) {
-        padding: 0;
-        transition: transform 0.1s ease;
-    }
-
-    .emby-button.raised:not(.button-alt):not(.button-delete) span {
-        display: block;
-        border-radius: inherit;
-        padding: .9em 1em;
-        color: white;
-        transition: transform 0.1s ease;
-    }
-
-    .emby-button.raised:hover span {
-        transform: translateY(-6px);
-    }
-
-    .emby-button.raised:active span {
-        transform: translateY(-2px);
-    }
-
-    /* Color effects for gray buttons like refresh */
-    .emby-button.raised:not(.button-submit):not(.button-delete):not(.button-alt) span { 
-        background: #303030; 
-    }
-    .emby-button.raised:not(.button-submit):not(.button-delete):not(.button-alt) { 
-        background: #262626; 
-    }
-
-    /* Color effects for blue buttons like save */
-    .emby-button.raised.button-submit span { 
-        background: #3399ff; 
-    }
-    .emby-button.raised.button-submit {
-        background: #0080ff;
+    /* Add some margin to block buttons so they don't overlap with the animation */
+    .emby-button.block {
+        margin: .75em 0;
     }
 
     /**********************************************************/
     /*     emby-button 3D effect hovering using ::before      */
-    /*       — used for little buttons in section title       */
-    /*                  like help or delete —                 */
+    /*               — used for every square buttons          */
     /**********************************************************/
 
-    .emby-button.raised.button-alt, 
-    .emby-button.raised.button-delete {
-        transition: transform 0.1s ease;
+    .emby-button.raised {
         transform-style: preserve-3d;
-        transform: translate3d(0, 0, 1px);
-        /* z-index doesn't work with transform (it creates separate context) so 
-        we have to use translate3D to put it behind or in front using z axis */
+        transition: transform 0.05s ease;
     }
 
-    .emby-button.raised.button-alt::before, 
-    .emby-button.raised.button-delete::before {
+    .emby-button.raised::before {
         content: "";
         position: absolute;
         top: 0;
@@ -75,47 +30,55 @@
         border-radius: inherit;
         width: 100%;
         height: 100%;
-        transition: transform 0.1s ease;
-        transform-style: preserve-3d;
+        transition: transform 0.05s ease;
         transform: translate3d(0, 0, -1px);
+        /* z-index doesn't work with transform (it creates a separate context) so 
+        we have to use translate3D to put it behind or in front using Z axis */
     }
 
-    .emby-button.raised.button-alt {
-        background: #303030;
+    /* Move button up when it is hovered to simulate a real 3D tangible button */
+    .emby-button.raised:hover {
+        transform: translate3d(0, -6px, 1px);
     }
-    .emby-button.raised.button-alt::before {
-        background: #262626;
+
+    .emby-button.raised:hover::before {
+        transform: translate3d(0, 6px, -1px);
     }
 
-    .emby-button.raised.button-delete {
-        background: #f70000;
+    /* Move button down when it is clicked to simulate a physical push */
+    .emby-button.raised:active {
+        transform: translate3d(0, -2px, 1px);
     }
 
-    .emby-button.raised.button-delete::before {
-        background: #b30000;
+    .emby-button.raised:active::before {
+        transform: translate3d(0, 2px, -1px);
     }
 
-    .emby-button.raised.button-alt:hover, 
-    .emby-button.raised.button-delete:hover { 
-        transform: translate3d(0, -6px, 1px); 
+    /* Color set for gray buttons like refresh */
+    .emby-button.raised:not(.button-submit):not(.button-delete)::before {
+        background: #262626;
+    }
+
+    .emby-button.raised:not(.button-submit):not(.button-delete) {
+        background: #303030;
     }
-    .emby-button.raised.button-alt:hover::before, 
-    .emby-button.raised.button-delete:hover::before { 
-        transform: translate3d(0, 6px, -1px); 
+
+    /* Color set for blue buttons like save */
+    .emby-button.raised.button-submit::before {
+        background: #0080ff;
     }
 
-    .emby-button.raised.button-alt:active, 
-    .emby-button.raised.button-delete:active { 
-        transform: translate3d(0, -2px, 1px); 
+    .emby-button.raised.button-submit {
+        background: #3399ff;
     }
-    .emby-button.raised.button-alt:active::before, 
-    .emby-button.raised.button-delete:active::before { 
-        transform: translate3d(0, 2px, -1px); 
+
+    /* Color set for red buttons like delete */
+    .emby-button.raised.button-delete {
+        background: #f70000;
     }
 
-    /* Add some margin to block buttons so they don't overlap with the animation */
-    .emby-button.block {
-        margin: .75em 0;
+    .emby-button.raised.button-delete::before {
+        background: #b30000;
     }
 
 }
\ No newline at end of file
diff --git a/card.css b/card.css
index a2ca770..e7e6d22 100644
--- a/card.css
+++ b/card.css
@@ -1,3 +1,8 @@
+:root {
+    --list-item-image-large-border-radius: 10px;
+    --list-item-wrapper-padding: 0.5em
+}
+
 /* Change the border radius of media cards */
 .cardBox:not(.visualCardBox) .cardImageContainer.cardContent,
 .cardBox:not(.visualCardBox) .cardPadder,
@@ -35,4 +40,43 @@
 .itemProgressBarForeground:not(.activeSession .itemProgressBarForeground),
 .itemProgressBar:not(.activeSession .itemProgressBar) {
     border-radius: 10px;
+}
+
+/*****************************************************************************/
+/* TV show season detail page specific settings (like Breaking Bad Season 2) */
+/*****************************************************************************/
+
+/* Add a border radius to the episode images */
+.listItemImage.listItemImage-large {
+    border-radius: var(--list-item-image-large-border-radius);
+}
+
+/* Add a border radius to the episode list container */
+.listItem.listItem-largeImage.listItem-withContentWrapper {
+    padding: var(--list-item-wrapper-padding);
+    border-radius: calc(var(--list-item-image-large-border-radius) + var(--list-item-wrapper-padding)) !important;
+}
+
+/* Set a max height for the episode overviews */
+.listItemImage-large + .listItemBody {
+    max-height: 13vw;
+    box-sizing: border-box;
+}
+
+/* Change color on hover for the episode titles */
+.listItem.listItem-largeImage.listItem-withContentWrapper:hover .listItemBodyText:first-child {
+    color: rgba(255, 255, 255, 1);
+}
+
+/* Change color on hover for the episode descriptions */
+.listItem.listItem-largeImage.listItem-withContentWrapper:hover .listItemBodyText.listItem-overview {
+    color: rgba(255, 255, 255, 0.75);
+}
+
+/* Crop the text when episode description is bigger than 8 lines */
+.listItem.listItem-largeImage.listItem-withContentWrapper .listItemBodyText.listItem-overview {
+    display: -webkit-box;
+    -webkit-line-clamp: 8;
+    -webkit-box-orient: vertical;
+    text-align: justify;
 }
\ No newline at end of file
diff --git a/color.css b/color.css
index d3efe4e..240df90 100644
--- a/color.css
+++ b/color.css
@@ -1,3 +1,23 @@
+/* Align played indicator badge inside card */
+.indicatorIcon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Add some margin to this played indicator badge */
+/* div.cardScalable button.cardImageContainer.coveredImage.cardContent.itemAction .cardIndicators, 
+div.cardScalable button.cardImageContainer.coveredImage.cardContent.itemAction .mediaSourceIndicator {
+    margin: 5px;
+    position: unset;
+} */
+
+/* Align the icon in the played indicator badge */
+/* .cardImageContainer {
+    justify-content: space-between;
+    align-items: flex-start;
+} */
+
 /* Change the media played indicators color to green */
 .playedIndicator {
     background: #5dd000;
@@ -13,44 +33,13 @@
     background: linear-gradient(to right, #03315c, #281a31);
 }
 
-/* Change the main color accentuation when hovering buttons */
-@media (hover: hover) and (pointer: fine) {
-    .paper-icon-button-light:hover:not(:disabled) {
-        color: rgba(255, 255, 255, 1);
-        background-color: rgba(255, 255, 255, 0.15);
-    }
-
-    .button-flat.detailButton:hover {
-        color: rgba(255, 255, 255, 1);
-    }
-}
-
-/* V1 Animation - expanding hover effect */
-@media (hover: hover) and (pointer: fine) {
-    .detailButton:hover:not(:disabled)::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        transform: scale(1);
-        transform-origin: center;
-        transition: .2s;
-    }
-
-    .detailButton:not(:disabled)::before {
-        content: "";
-        background-color: rgba(255, 255, 255, 0.15);
-        border-radius: 50%;
-        aspect-ratio: 1/1;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 0;
-        height: 0;
-        z-index: -1
-    }
+/* Align play icon in the middle of the circle (changing the center of the triangle */
+.material-icons.play_arrow::before {
+    width: 33%;
+}
+
+.cardOverlayButtonIcon.play_arrow {
+    width: 100% !important;
 }
 
 /* Make the buttons in media detail pages (like play, add to favorite, mark as watched) square */
@@ -58,14 +47,6 @@
     aspect-ratio: 1/1
 }
 
-/* V2 Animation - shrinking hover effect */
-/*@media (hover: hover) and (pointer: fine) {
-    .detailButton:hover:not(:disabled) {
-        background-color: rgba(255, 255, 255, 0.15);
-        border-radius: 50%;
-    }
-}*/
-
 /* Change the main color accentuation for various items */
 .emby-tab-button:hover,
 .mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__inner-circle,
@@ -139,4 +120,70 @@
 /* Change the progress bar color of resumable medias */
 .itemProgressBarForeground:not(.activeSession .itemProgressBarForeground) {
     background-color: #f7ca18;
+}
+
+/* Change background color on hover for metadata editor left drawer */
+.jstree-wholerow-hovered {
+    background-color: #252528 !important;
+}
+
+/* Change background color when selected for metadata editor left drawer */
+.jstree-wholerow-clicked {
+    background-color: #3399ff !important;
+}
+
+/* Change icons color for metadata editor left drawer */
+.material-icons.metadataSidebarIcon.folder,
+.material-icons.metadataSidebarIcon.movie,
+.material-icons.metadataSidebarIcon.lock {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+/* Change background color when selected for dashboard left drawer */
+.navMenuOption-selected {
+    background-color: #3399ff !important;
+}
+
+/* Change text color on hover for section title (ex: in Genres tab) */
+.sectionTitleTextButton.button-flat:hover,
+.button-flat.listTextButton-autohide:hover {
+    color: white !important;
+}
+
+/****************************/
+/* Contextual menu settings */
+/****************************/
+
+/* Add a border radius to contextual menu container */
+.focuscontainer.actionSheet.centeredDialog.opened {
+    border-radius: 0.8em !important;
+}
+
+/* Style contextual menu list item */
+.listItem.listItem-button.actionSheetMenuItem {
+    margin: 0 0.4em;
+    width: auto;
+    padding: 0;
+}
+
+/* Add a border radius to contextual menu list item when hovering */
+.listItem.listItem-button.actionSheetMenuItem:hover {
+    border-radius: 0.4em !important;
+}
+
+/* Change contextual menu list item icons color when hovering */
+.listItem.listItem-button.actionSheetMenuItem:hover span.material-icons {
+    color: white;
+}
+
+/* Hide contextual menu scrollbar */
+.actionSheetScroller.scrollY {
+    scrollbar-width: none;
+}
+
+/* Style contextual menu list separator */
+.actionsheetDivider {
+    margin-top: 0.4em;
+    margin-bottom: 0.4em;
+    background: rgba(255, 255, 255, 0.05);
 }
\ No newline at end of file
diff --git a/icon-fix.css b/icon-fix.css
index e952a09..d7ae22c 100644
--- a/icon-fix.css
+++ b/icon-fix.css
@@ -15,7 +15,9 @@
         .emby-select-iconbutton .material-icons, /* Search and add icons next to select fields in "Modifier les sous-titres" */
         .btnOpenExternalId .material-icons, /* Open in external browser icon next to input fields when editing media metadata */
         .iconOsd .material-icons, /* Volume icon in Jellyfin web player OSD */
-        .syncPlayContainer .material-icons /* Play and sync icon in Jellyfin web player OSD when using SyncPlay */
+        .syncPlayContainer .material-icons, /* Play and sync icon in Jellyfin web player OSD when using SyncPlay */
+        .paperList .listItem .material-icons.listItemIcon, /* Badges in settings lists */
+        .subtitleList .listItem .material-icons.listItemIcon /* Badges in settings lists */
     ) {
     font-size: 1.15em !important;
     width: 1em !important;
@@ -55,6 +57,12 @@
     margin-left: 0;
 }
 
+.material-icons.chevron_right,
+.material-icons.chevron_left {
+    width: 1em;
+    height: 1em;
+}
+
 /****************************/
 /* Other icon related fixes */
 /****************************/
@@ -65,9 +73,9 @@
     margin: .125em 0 .125em !important;
 }
 
-.listItemButton {
+/* .listItemButton {
     line-height: 0em;
-}
+} */
 
 /* Fix the missing icon when a cast device is connected */
 .material-icons.cast_connected:before {
diff --git a/img/block-buttons.png b/img/block-buttons.png
new file mode 100644
index 0000000..b41f0d8
Binary files /dev/null and b/img/block-buttons.png differ
diff --git a/img/dashboard-badges.png b/img/dashboard-badges.png
new file mode 100644
index 0000000..798a122
Binary files /dev/null and b/img/dashboard-badges.png differ
diff --git a/img/dashboard-inputs.png b/img/dashboard-inputs.png
new file mode 100644
index 0000000..56234f5
Binary files /dev/null and b/img/dashboard-inputs.png differ
diff --git a/img/detail-page.png b/img/detail-page.png
new file mode 100644
index 0000000..d095747
Binary files /dev/null and b/img/detail-page.png differ
diff --git a/img/favorite-tab.png b/img/favorite-tab.png
new file mode 100644
index 0000000..961ce84
Binary files /dev/null and b/img/favorite-tab.png differ
diff --git a/img/film-library.png b/img/film-library.png
new file mode 100644
index 0000000..2a6c37d
Binary files /dev/null and b/img/film-library.png differ
diff --git a/input.css b/input.css
index 5c06d92..2afa435 100644
--- a/input.css
+++ b/input.css
@@ -93,4 +93,10 @@
 .paperList:empty {
     text-align: center;
     padding: .5em 1em;
+}
+
+.checkboxIcon-checked {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
\ No newline at end of file
diff --git a/media-player.css b/media-player.css
new file mode 100644
index 0000000..e649849
--- /dev/null
+++ b/media-player.css
@@ -0,0 +1,181 @@
+/***********************************/
+/* V1 - Thin yellow bar with round */
+/***********************************/
+
+:root {
+    --mdl-slider-container-height: 1.25em;
+    --mdl-slider-background-flex-height: 0.3em;
+    --mdl-slider-background-flex-height-hover: 0.5em;
+    --slider-primary-color: #f7ca18;
+}
+
+/* Define a border radius for pre-existing slider tooltip on hover */
+.sliderBubble {
+    border-radius: 10px;
+}
+
+/* Style the slider thumb (the grabable bullet) */
+.mdl-slider::-webkit-slider-thumb,
+.mdl-slider::-moz-range-thumb {
+    background-color: var(--slider-primary-color);
+    cursor: default;
+    height: 1em;
+    width: 1em;
+}
+
+/* Remove thumb scaling up when hovering */
+.mdl-slider-hoverthumb:hover::-webkit-slider-thumb,
+.mdl-slider-hoverthumb:hover::-moz-range-thumb {
+    transform: none;
+}
+
+/* Change cursor when hovering the slider but not hovering the thumb */
+.mdl-slider:hover {
+    cursor: default;
+}
+
+/* Change cursor when hovering the thumb */
+.mdl-slider:hover::-moz-range-thumb,
+.mdl-slider:hover::-webkit-slider-thumb {
+    cursor: grab;
+}
+
+/* Change cursor when sliding the thumb */
+.mdl-slider:active,
+.mdl-slider:active::-moz-range-thumb,
+.mdl-slider:active::-webkit-slider-thumb {
+    cursor: grabbing;
+}
+
+/* Already played part in slider */
+.mdl-slider-background-lower {
+    background-color: var(--slider-primary-color);
+    border-radius: 50px;
+}
+
+/* Define height and radius for the slider */
+.mdl-slider-background-flex {
+    height: var(--mdl-slider-background-flex-height);
+    border-radius: 50px;
+    margin-top: 0;
+}
+
+/* Increase height when slider is hovered */
+.mdl-slider-container:hover .mdl-slider-background-flex {
+    height: var(--mdl-slider-background-flex-height-hover);
+}
+
+/* Position the slider container astride the bottom player hence half its height (1.25em) */
+.mdl-slider-container.nowPlayingBarPositionContainer {
+    top: calc(var(--mdl-slider-container-height) / -2);
+}
+
+/* Position the slider correctly on the page according to its height */
+.mdl-slider-background-flex-container {
+    top: calc(50% - var(--mdl-slider-background-flex-height) / 2);
+}
+
+/* Position the slider correctly on the page according to its increased height when hovering */
+.mdl-slider-container:hover .mdl-slider-background-flex-container {
+    top: calc(50% - var(--mdl-slider-background-flex-height-hover) / 2);
+}
+
+/* Add some margin for the remote media control slider */
+.nowPlayingInfoControls > .sliderContainer {
+    margin-bottom: 1em;
+}
+
+/* Override default margin for the remote media control slider to align it correctly */
+.nowPlayingPositionSliderContainer.mdl-slider-container {
+    margin: 0em 1em;
+}
+
+/* Override default margin for the OSD media player slider to align it correctly */
+.osdControls .sliderContainer {
+    margin: 0.25em 0 !important;
+}
+
+
+/**********************************/
+/* V2 - Yellow large range slider */ 
+/**********************************/
+
+/* .sliderBubble {
+    border-radius: 10px;
+}
+
+.mdl-slider::-webkit-slider-thumb,
+.mdl-slider::-moz-range-thumb {
+    background-color: #202020;
+    cursor: default;
+    height: 1.25em;
+    width: 1.25em;
+    border: 2px solid #f7ca18;
+}
+
+.mdl-slider-hoverthumb:hover::-webkit-slider-thumb,
+.mdl-slider-hoverthumb:hover::-moz-range-thumb {
+    transform: none;
+    border: 2px solid #f7ca18;
+}
+
+.mdl-slider {
+    cursor: default;
+} */
+
+/* Already played part in slider */
+/* .mdl-slider-background-lower {
+    background-color: #f7ca18;
+    padding-right: calc(1.25em + 4px);
+    margin-left: calc(-0.75em - 4px);
+    border-radius: 100px;
+}
+
+.mdl-slider-background-flex-inner {
+    margin: 0 0.75em;
+}
+
+.nowPlayingBarPositionContainer {
+    top: -1.284em !important;
+}
+
+.mdl-slider {
+    height: 100%;
+}
+
+.mdl-slider-background-flex-container {
+    top: 0;
+    padding: 0;
+    height: 100%;
+}
+
+.mdl-slider-background-flex {
+    margin-top: 0;
+    height: 100%;
+    border-radius: 100px;
+}
+
+div.nowPlayingInfoControls div.sliderContainer {
+    align-items: center;
+
+    .positionTime {
+        height: fit-content;
+    }
+}
+
+.nowPlayingPositionSliderContainer {
+    margin: 1em;
+}
+
+.nowPlayingVolumeSliderContainer {
+    margin-left: 0.3em;
+}
+
+.nowPlayingBarVolumeSliderContainer {
+    margin-left: 0.5em;
+} */
+
+/* Fix for slider in the "Subtitles" settings page */
+/* .sliderContainer-settings .mdl-slider-container {
+    height: unset;
+} */
\ No newline at end of file
diff --git a/tooltip.css b/tooltip.css
new file mode 100644
index 0000000..819775e
--- /dev/null
+++ b/tooltip.css
@@ -0,0 +1,268 @@
+@media (hover: hover) and (pointer: fine) {
+    :root {
+        --tooltip-background-color-transparent: rgba(255, 255, 255, 0.15);
+        --tooltip-background-color-solid: #282828;
+    }
+
+    /* Create (but hide by default) a custom tooltip for the following buttons */
+    .detailButton[title]:not(:disabled)::before,
+    .headerButton[title]:not(:disabled)::before,
+    .btnNextPage:not(:disabled)::before,
+    .btnPreviousPage:not(:disabled)::before,
+    .btnSelectView[title]:not(:disabled)::before,
+    .btnSort[title]:not(:disabled)::before,
+    .btnFilter[title]:not(:disabled)::before,
+    .btnNewCollection[title]:not(:disabled)::before,
+    .btnViewSettings[title]:not(:disabled)::before,
+    .emby-scrollbuttons-button[title]:not(:disabled)::before,
+    .btnPreviousTrack[title]:not(:disabled)::before,
+    .btnPreviousChapter[title]:not(:disabled)::before,
+    .btnRewind[title]:not(:disabled)::before,
+    .btnPause[title]:not(:disabled)::before,
+    .btnFastForward[title]:not(:disabled)::before,
+    .btnNextChapter[title]:not(:disabled)::before,
+    .btnNextTrack[title]:not(:disabled)::before,
+    .btnSubtitles[title]:not(:disabled)::before,
+    .btnAudio[title]:not(:disabled)::before,
+    .buttonMute[title]:not(:disabled)::before,
+    .btnVideoOsdSettings[title]:not(:disabled)::before,
+    .btnFullscreen[title]:not(:disabled)::before,
+    .btnPlayPause[title]:not(:disabled)::before,
+    .btnStop[title]:not(:disabled)::before,
+    .btnToggleFullscreen[title]:not(:disabled)::before,
+    .btnShuffleQueue[title]:not(:disabled)::before,
+    .btnRepeat[title]:not(:disabled)::before,
+    .nowPlayingPageUserDataButtons button[is="emby-ratingbutton"]:not(:disabled)::before {
+        content: attr(title);
+        background-color: var(--tooltip-background-color-transparent);
+        padding: 0.3em;
+        transform: scale(0);
+        position: absolute;
+        z-index: -1;
+    }
+
+    /* Display the custom tooltip when hovering */
+    .detailButton[title]:hover:not(:disabled)::before,
+    .headerButton[title]:hover:not(:disabled)::before,
+    .btnNextPage:hover:not(:disabled)::before,
+    .btnPreviousPage:hover:not(:disabled)::before,
+    .btnSelectView[title]:hover:not(:disabled)::before,
+    .btnSort[title]:hover:not(:disabled)::before,
+    .btnFilter[title]:hover:not(:disabled)::before,
+    .btnNewCollection[title]:hover:not(:disabled)::before,
+    .btnViewSettings[title]:hover:not(:disabled)::before,
+    .emby-scrollbuttons-button[title]:hover:not(:disabled)::before,
+    .btnPreviousTrack[title]:hover:not(:disabled)::before,
+    .btnPreviousChapter[title]:hover:not(:disabled)::before,
+    .btnRewind[title]:hover:not(:disabled)::before,
+    .btnPause[title]:hover:not(:disabled)::before,
+    .btnFastForward[title]:hover:not(:disabled)::before,
+    .btnNextChapter[title]:hover:not(:disabled)::before,
+    .btnNextTrack[title]:hover:not(:disabled)::before,
+    .btnSubtitles[title]:hover:not(:disabled)::before,
+    .btnAudio[title]:hover:not(:disabled)::before,
+    .buttonMute[title]:hover:not(:disabled)::before,
+    .btnVideoOsdSettings[title]:hover:not(:disabled)::before,
+    .btnFullscreen[title]:hover:not(:disabled)::before,
+    .btnPlayPause[title]:hover:not(:disabled)::before,
+    .btnStop[title]:hover:not(:disabled)::before,
+    .btnToggleFullscreen[title]:hover:not(:disabled)::before,
+    .btnShuffleQueue[title]:hover:not(:disabled)::before,
+    .btnRepeat[title]:hover:not(:disabled)::before,
+    .nowPlayingPageUserDataButtons button[is="emby-ratingbutton"]:hover:not(:disabled)::before {
+        transform: scale(1);
+        transform-origin: center;
+        transition: .2s;
+        border-radius: 5px;
+    }
+
+    /* Override the hidden overflow for the following buttons, otherwise the tooltips aren't displayed (because outside the button itself) */
+    .headerLeft,
+    .headerRight,
+    .headerButton,
+    .btnNextPage:not(:disabled),
+    .btnPreviousPage:not(:disabled),
+    .btnSelectView[title]:not(:disabled),
+    .btnSort[title]:not(:disabled),
+    .btnFilter[title]:not(:disabled),
+    .btnNewCollection[title]:not(:disabled),
+    .btnViewSettings[title]:not(:disabled),
+    .emby-scrollbuttons-button[title]:not(:disabled),
+    .btnPreviousTrack[title]:not(:disabled),
+    .btnPreviousChapter[title]:not(:disabled),
+    .btnRewind[title]:not(:disabled),
+    .btnPause[title]:not(:disabled),
+    .btnFastForward[title]:not(:disabled),
+    .btnNextChapter[title]:not(:disabled),
+    .btnNextTrack[title]:not(:disabled),
+    .btnSubtitles[title]:not(:disabled),
+    .btnAudio[title]:not(:disabled),
+    .buttonMute[title]:not(:disabled),
+    .btnVideoOsdSettings[title]:not(:disabled),
+    .btnFullscreen[title]:not(:disabled),
+    .btnPlayPause[title]:not(:disabled),
+    .btnStop[title]:not(:disabled),
+    .btnToggleFullscreen[title]:not(:disabled),
+    .btnShuffleQueue[title]:not(:disabled),
+    .btnRepeat[title]:not(:disabled),
+    .nowPlayingPageUserDataButtons button[is="emby-ratingbutton"]:not(:disabled) {
+        overflow: unset;
+    }
+
+    /*********************************/
+    /* Detail page specific settings */
+    /*********************************/
+
+    /* Custom tooltip position for buttons in the detail page */
+    .detailButton[title]:not(:disabled)::before {
+        white-space: nowrap;
+        top: -60%;
+    }
+
+    /* Yellow background color for "Play" button */
+    .detailButton[title='Reprendre']:not(:disabled)::before {
+        background-color: rgba(247, 202, 24, 0.15);
+    }
+
+    /* Yellow background color for "Play" button */
+    .detailButton[title='Lire']:not(:disabled)::before {
+        background-color: rgba(247, 202, 24, 0.15);
+    }
+
+    /* Green background color for "Play" button */
+    .detailButton[title='Marquer comme lu']:not(:disabled)::before {
+        background-color: rgba(93, 208, 0, 0.15);
+    }
+
+    /* Red background color for "Play" button */
+    .detailButton[title='Ajouter aux favoris']:not(:disabled)::before {
+        background-color: rgba(204, 51, 51, 0.15);
+    }
+
+    /****************************/
+    /* Header specific settings */
+    /****************************/
+
+    /* Custom tooltip position for buttons in the header */
+    .headerButton[title]:not(:disabled)::before {
+        top: 110%;
+    }
+
+    /* Override the contain property for the header, otherwise the tooltips aren't displayed (because outside the header itself) */
+    .skinHeader {
+        contain: layout style;
+    }
+
+    /*************************************/
+    /* Top bar filters specific settings */
+    /*************************************/
+
+    /* Custom tooltip position for buttons above the library items */
+    .btnNextPage:not(:disabled)::before,
+    .btnPreviousPage:not(:disabled)::before,
+    .btnSelectView[title]:not(:disabled)::before,
+    .btnSort[title]:not(:disabled)::before,
+    .btnFilter[title]:not(:disabled)::before,
+    .btnNewCollection[title]:not(:disabled)::before {
+        top: -100%;
+        white-space: nowrap;
+    }
+
+    /* Custom settings for More button in generic libraries top button line */
+    .listTextButton-autohide.btnViewSettings {
+        justify-content: center;
+        font-weight: initial;
+    }
+
+    /****************************************/
+    /* Navigation buttons specific settings */
+    /****************************************/
+
+    /* Setting a content for the tooltip because button .btnNextPage doesn't have a title property */
+    .btnNextPage:not(:disabled)::before {
+        content: "Suivant";
+    }
+
+    /* Setting a content for the tooltip because button .btnPreviousPage doesn't have a title property */
+    .btnPreviousPage:not(:disabled)::before {
+        content: "Précédent";
+    }
+
+    /* Custom tooltip position for horizontal navigation buttons and some other buttons */
+    .emby-scrollbuttons-button[title]:not(:disabled)::before,
+    .listTextButton-autohide[title]:not(:disabled).btnViewSettings::before {
+        top: -65%;
+        white-space: nowrap;
+    }
+
+    /**************************************/
+    /* OSD media player specific settings */
+    /**************************************/
+
+    /* Custom tooltip position for buttons in OSD media player */
+    .btnPreviousTrack[title]:not(:disabled)::before,
+    .btnPreviousChapter[title]:not(:disabled)::before,
+    .btnRewind[title]:not(:disabled)::before,
+    .btnPause[title]:not(:disabled)::before,
+    .btnFastForward[title]:not(:disabled)::before,
+    .btnNextChapter[title]:not(:disabled)::before,
+    .btnNextTrack[title]:not(:disabled)::before,
+    .btnSubtitles[title]:not(:disabled)::before,
+    .btnAudio[title]:not(:disabled)::before,
+    .buttonMute[title]:not(:disabled)::before,
+    .btnVideoOsdSettings[title]:not(:disabled)::before,
+    .btnFullscreen[title]:not(:disabled)::before {
+        background-color: var(--tooltip-background-color-solid);
+        top: -100%;
+        white-space: nowrap;
+    }
+
+    .btnPreviousTrack[title]:not(:disabled),
+    .btnPreviousChapter[title]:not(:disabled),
+    .btnRewind[title]:not(:disabled),
+    .btnPause[title]:not(:disabled),
+    .btnFastForward[title]:not(:disabled),
+    .btnNextChapter[title]:not(:disabled),
+    .btnNextTrack[title]:not(:disabled),
+    .btnSubtitles[title]:not(:disabled),
+    .btnAudio[title]:not(:disabled),
+    .buttonMute[title]:not(:disabled),
+    .btnVideoOsdSettings[title]:not(:disabled),
+    .btnFullscreen[title]:not(:disabled) {
+        z-index: 2;
+    }
+
+    /*****************************************/
+    /* Remote media player specific settings */
+    /*****************************************/
+
+    /* Scale Play button tooltip in remote media control */
+    .btnPlayPause::before {
+        font-size: 0.5em;
+    }
+
+    /* Custom tooltip position for buttons in remote media control */
+    .btnPlayPause[title]:not(:disabled)::before,
+    .btnStop[title]:not(:disabled)::before,
+    .btnToggleFullscreen[title]:not(:disabled)::before,
+    .btnShuffleQueue[title]:not(:disabled)::before,
+    .btnRepeat[title]:not(:disabled)::before,
+    .btnRewind.btnPlayStateCommand[title]:not(:disabled)::before,
+    .btnPreviousTrack.btnPlayStateCommand[title]:not(:disabled)::before,
+    .btnNextTrack.btnPlayStateCommand[title]:not(:disabled)::before,
+    .btnFastForward.btnPlayStateCommand[title]:not(:disabled)::before,
+    .btnSubtitles.btnPlayStateCommand[title]:not(:disabled)::before,
+    .nowPlayingSecondaryButtons .buttonMute[title]:not(:disabled)::before,
+    .nowPlayingPageUserDataButtons button[is="emby-ratingbutton"]:not(:disabled)::before {
+        background-color: var(--tooltip-background-color-transparent);
+        top: 125%;
+        white-space: nowrap;
+    }
+
+    /* Custom settings for Favorite button in remote media player */
+    .nowPlayingPageUserDataButtons button[is="emby-ratingbutton"] {
+        display: flex;
+        justify-content: center;
+        font-weight: initial;
+    }
+}
\ No newline at end of file