YoungToaster

Jellyfin play button relocation fix

Jan 8th, 2023
397
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.37 KB | None | 0 0
  1. /*----------------------------------------------Center the play and pause rewind and fast forward button (MOBILE)*/
  2. .layout-mobile
  3. .btnPause {
  4. position: fixed;
  5. top: 49%;
  6. left: 49%;
  7. transform: translate(-50%, -50%);
  8. -webkit-transform: translate(-50%, -50%);
  9. padding: 30px;
  10. }
  11. .layout-mobile
  12. .material-icons.pause:before {
  13. font-size: 2.1em;
  14. }
  15. .layout-mobile
  16. .xlargePaperIconButton.material-icons.play_arrow:before {
  17. font-size: 3.5em;
  18. }
  19. .layout-mobile
  20. .btnRewind {
  21. position: fixed;
  22. top: 49%;
  23. left: 24%;
  24. transform: translate(-50%, -50%);
  25. -webkit-transform: translate(-50%, -50%);
  26. padding: 30px;
  27. }
  28. .layout-mobile
  29. .btnFastForward {
  30. position: fixed;
  31. top: 49%;
  32. left: 74%;
  33. transform: translate(-50%, -50%);
  34. -webkit-transform: translate(-50%, -50%);
  35. padding: 30px;
  36. }
  37. .layout-mobile
  38. .xlargePaperIconButton.material-icons.fast_forward {
  39. font-size: 3.5em;
  40. }
  41. .layout-mobile
  42. .xlargePaperIconButton.material-icons.fast_rewind {
  43. font-size: 3.5em;
  44. }
  45. .layout-mobile
  46. @media (max-width: 50em) {
  47. .videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind {
  48. display: block !important;
  49. }
  50. }
  51.  
  52.  
  53. /*----------------------------------------------Center the play and pause rewind and fast forward button (DESKTOP)*/
  54. .layout-desktop
  55. .btnPause {
  56. position: fixed;
  57. top: 50%;
  58. left: 50%;
  59. transform: translate(-50%, -50%);
  60. -webkit-transform: translate(-50%, -50%);
  61. padding: 30px;
  62. }
  63. .layout-desktop
  64. .material-icons.pause:before {
  65. font-size: 2.1em;
  66. }
  67. .layout-desktop
  68. .xlargePaperIconButton.material-icons.play_arrow:before {
  69. font-size: 3.5em;
  70. }
  71. .layout-desktop
  72. .btnRewind {
  73. position: fixed;
  74. top: 50%;
  75. left: 25%;
  76. transform: translate(-50%, -50%);
  77. -webkit-transform: translate(-50%, -50%);
  78. padding: 30px;
  79. }
  80. .layout-desktop
  81. .btnFastForward {
  82. position: fixed;
  83. top: 50%;
  84. left: 75%;
  85. transform: translate(-50%, -50%);
  86. -webkit-transform: translate(-50%, -50%);
  87. padding: 30px;
  88. }
  89. .layout-desktop
  90. .xlargePaperIconButton.material-icons.fast_forward {
  91. font-size: 3.5em;
  92. }
  93. .layout-desktop
  94. .xlargePaperIconButton.material-icons.fast_rewind {
  95. font-size: 3.5em;
  96. }
  97. .layout-desktop
  98. @media (max-width: 50em) {
  99. .videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind {
  100. display: block !important;
  101. }
  102. }
Tags: jellyfin
Advertisement
Add Comment
Please, Sign In to add comment