volume.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. /* #region volume slider */
  2. .bytm-vol-slider-cont {
  3. position: relative;
  4. }
  5. .bytm-vol-slider-label {
  6. --bytm-slider-label-bg-col: var(
  7. --ytmusic-player-bar-background,
  8. var(--bytm-themed-bg)
  9. );
  10. position: absolute;
  11. top: 50%;
  12. left: 0;
  13. transform: translate(calc(-50% - 11px), -50%);
  14. display: flex;
  15. flex-direction: row;
  16. align-items: center;
  17. gap: 5px;
  18. background-color: var(--bytm-slider-label-bg-col);
  19. background: linear-gradient(
  20. 90deg,
  21. rgba(0, 0, 0, 0) 0%,
  22. var(--bytm-slider-label-bg-col) 20%
  23. );
  24. font-size: 1.4rem;
  25. text-align: right;
  26. padding: 15px;
  27. padding-right: 5px;
  28. opacity: 0.000001;
  29. transition: opacity 0.2s ease;
  30. }
  31. .bytm-vol-slider-label.has-icon {
  32. transform: translate(calc(-50% - 25px), -50%);
  33. }
  34. .bytm-vol-slider-label svg {
  35. padding: 4px;
  36. }
  37. .bytm-vol-slider-label svg path {
  38. fill: #909090;
  39. }
  40. .bytm-vol-slider-label.bytm-visible {
  41. opacity: 1;
  42. }
  43. :root
  44. body.bytm-dom-ytm
  45. ytmusic-app-layout[player-ui-state="FULLSCREEN"]
  46. .bytm-vol-slider-label {
  47. color: #fff;
  48. }
  49. .bytm-vol-slider-shared {
  50. display: flex;
  51. flex-direction: row;
  52. align-items: center;
  53. }
  54. .bytm-vol-slider-shared svg {
  55. width: 20px;
  56. height: 20px;
  57. }