视频播放器仓库

Volume.css 1004B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. .component {
  2. position: relative;
  3. }
  4. .component:hover {
  5. background-color: #000;
  6. }
  7. .button {
  8. width: 34px;
  9. height: 34px;
  10. background: none;
  11. border: 0;
  12. color: inherit;
  13. font: inherit;
  14. line-height: normal;
  15. overflow: visible;
  16. padding: 0;
  17. cursor: pointer;
  18. }
  19. .button:focus {
  20. outline: 0;
  21. }
  22. .icon {
  23. padding: 7px;
  24. }
  25. .slider {
  26. display: none;
  27. position: absolute;
  28. right: 5px;
  29. bottom: 100%;
  30. left: 5px;
  31. height: 56px;
  32. background-color: #000;
  33. }
  34. .component:hover .slider {
  35. display: block;
  36. }
  37. .track {
  38. position: absolute;
  39. top: 8px;
  40. bottom: 8px;
  41. left: 50%;
  42. width: 4px;
  43. transform: translateX(-50%);
  44. background-color: #3e3e3e;
  45. }
  46. .fill,
  47. .input {
  48. position: absolute;
  49. right: 0;
  50. bottom: 0;
  51. left: 0;
  52. height: 100%;
  53. width: 100%;
  54. }
  55. .fill {
  56. background-color: #fff;
  57. }
  58. .input {
  59. padding: 0;
  60. margin: 0;
  61. opacity: 0;
  62. -webkit-appearance: slider-vertical;
  63. cursor: pointer;
  64. }