视频播放器仓库

Volume.css 1.0KB

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