Skip to content

Instantly share code, notes, and snippets.

@sk22

sk22/jellyfin-custom.css

Last active May 26, 2021 12:38
Show Gist options
  • Save sk22/ce6f086a888b61eee8d3de0e18e61387 to your computer and use it in GitHub Desktop.
Save sk22/ce6f086a888b61eee8d3de0e18e61387 to your computer and use it in GitHub Desktop.
Download ZIP
custom css for jellyfin. no more accidental full volume on touch
Raw
jellyfin-custom.css
.layout-mobile .volumecontrol .nowPlayingVolumeSliderContainer {
visibility: hidden;
opacity: 0;
transform: scale(0.9);
transition: opacity 0.3s ease;
transition-property: opacity, transform;
position: fixed;
top: 50vh;
left: 0;
width: 60%;
margin: 0 20%;
}
.layout-mobile .volumecontrol:hover .nowPlayingVolumeSliderContainer {
visibility: visible;
opacity: 1;
transform: scale(1);
}
.layout-mobile .volumecontrol .nowPlayingVolumeSliderContainer::before {
content: '';
position: absolute;
top: 0;
left: 0;
margin: -2rem;
background: rgba(0, 0, 0, 0.94);
width: calc(100% + 4rem);
height: 5rem;
z-index: -1;
box-shadow: 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%),
0 8px 10px -5px rgb(0 0 0 / 40%);
}
Raw
jellyfin-custom.min.css
.layout-mobile .volumecontrol .nowPlayingVolumeSliderContainer{visibility:hidden;opacity:0;transform:scale(0.9);transition:opacity 0.3s ease;transition-property:opacity, transform;position:fixed;top:50vh;left:0;width:60%;margin:0 20%}.layout-mobile .volumecontrol:hover .nowPlayingVolumeSliderContainer{visibility:visible;opacity:1;transform:scale(1)}.layout-mobile .volumecontrol .nowPlayingVolumeSliderContainer::before{content:'';position:absolute;top:0;left:0;margin:-2rem;background:rgba(0, 0, 0, 0.94);width:calc(100% + 4rem);height:5rem;z-index:-1;box-shadow:0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 40%)}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment