AudioPlayer.module.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. .audioPlayer {
  2. display: flex;
  3. flex-direction: row;
  4. align-items: center;
  5. background-color: #ffffff;
  6. border-radius: 10px;
  7. padding: 8px;
  8. min-width: 240px;
  9. max-width: 420px;
  10. max-height: 40px;
  11. backdrop-filter: blur(5px);
  12. border: 1px solid rgba(16, 24, 40, 0.08);
  13. box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05);
  14. gap: 8px;
  15. }
  16. .playButton {
  17. display: inline-flex;
  18. width: 16px;
  19. height: 16px;
  20. border-radius: 50%;
  21. background-color: #296DFF;
  22. color: white;
  23. border: none;
  24. cursor: pointer;
  25. align-items: center;
  26. justify-content: center;
  27. transition: background-color 0.1s;
  28. flex-shrink: 0;
  29. }
  30. .playButton:hover {
  31. background-color: #3367d6;
  32. }
  33. .playButton:disabled {
  34. background-color: #bdbdbf;
  35. }
  36. .audioControls {
  37. flex-grow: 1;
  38. }
  39. .progressBarContainer {
  40. height: 32px;
  41. display: flex;
  42. align-items: center;
  43. justify-content: center;
  44. }
  45. .waveform {
  46. position: relative;
  47. display: flex;
  48. cursor: pointer;
  49. height: 24px;
  50. width: 100%;
  51. flex-grow: 1;
  52. align-items: center;
  53. justify-content: center;
  54. }
  55. .progressBar {
  56. position: absolute;
  57. top: 0;
  58. left: 0;
  59. opacity: 0.5;
  60. border-radius: 2px;
  61. flex: none;
  62. order: 55;
  63. flex-grow: 0;
  64. height: 100%;
  65. background-color: rgba(66, 133, 244, 0.3);
  66. pointer-events: none;
  67. }
  68. .timeDisplay {
  69. /* position: absolute; */
  70. color: #296DFF;
  71. border-radius: 2px;
  72. order: 0;
  73. height: 100%;
  74. width: 50px;
  75. display: inline-flex;
  76. align-items: center;
  77. justify-content: center;
  78. }
  79. /* .currentTime {
  80. position: absolute;
  81. bottom: calc(100% + 5px);
  82. transform: translateX(-50%);
  83. background-color: rgba(255,255,255,.8);
  84. padding: 2px 4px;
  85. border-radius:10px;
  86. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
  87. } */
  88. .duration {
  89. background-color: rgba(255, 255, 255, 0.8);
  90. padding: 2px 4px;
  91. border-radius: 10px;
  92. }
  93. .source_unavailable {
  94. border: none;
  95. display: flex;
  96. align-items: center;
  97. justify-content: center;
  98. width: 100%;
  99. height: 100%;
  100. position: absolute;
  101. color: #bdbdbf;
  102. }
  103. .playButton svg path,
  104. .playButton svg rect{
  105. fill:currentColor;
  106. }