index.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. body {
  2. margin: 0;
  3. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
  4. 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  5. sans-serif;
  6. -webkit-font-smoothing: antialiased;
  7. -moz-osx-font-smoothing: grayscale;
  8. }
  9. .main{
  10. width: 100%;
  11. }
  12. .logo {
  13. width: 50px;
  14. }
  15. .logoimg{
  16. width: 50px;
  17. }
  18. code {
  19. font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
  20. monospace;
  21. }
  22. .card {
  23. color:black;
  24. text-decoration: none;
  25. }
  26. .rounded-5 {
  27. border-radius: 20px!important;
  28. }
  29. .playlist-img-box{
  30. min-height: 250px;
  31. min-width: 250px;
  32. max-height: 250px;
  33. max-width: 250px;
  34. overflow: hidden;
  35. }
  36. .cursor-pointer {
  37. cursor: pointer;
  38. }
  39. .playlist-title {
  40. overflow: hidden;
  41. text-overflow: ellipsis;
  42. }
  43. .track-name .line {
  44. /*width: 100px;*/
  45. display: inline-flex;
  46. }
  47. .track-name .second {
  48. display: inline-flex;
  49. white-space: nowrap;
  50. overflow: hidden;
  51. animation-play-state: paused;
  52. }
  53. .track-name .line .second span {
  54. animation: ticker 6s linear infinite;
  55. }
  56. @keyframes ticker {
  57. 0% {
  58. transform: translate(40%, 0);
  59. }
  60. 50% {
  61. transform: translate(-40%, 0);
  62. }
  63. 100% {
  64. transform: translate(40%, 0);
  65. }
  66. }
  67. .playlist-play-box{
  68. bottom: 15px;
  69. right: 15px;
  70. }
  71. .preview-tracks-block{
  72. max-height: 200px;
  73. overflow:auto;
  74. }
  75. .playlist-grey-box{
  76. background: rgba(0, 0, 0, 0.54);
  77. position: absolute;
  78. top: 0;
  79. left: 0;
  80. width: 100%;
  81. height: 100%
  82. }
  83. .player{
  84. padding-top: 20px;
  85. }
  86. .wrapper{
  87. border: 1px solid transparent;
  88. padding: 30px;
  89. border-radius: 20px;
  90. box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  91. }
  92. .details{
  93. display: flex;
  94. align-items: center;
  95. flex-direction: column;
  96. justify-content: center;
  97. }
  98. .track-art{
  99. height: 250px;
  100. width: 250px;
  101. background-size: cover;
  102. background-position: center;
  103. -moz-border-radius:20px;
  104. -webkit-border-radius:20px;
  105. border-radius: 20px;
  106. }
  107. .now-playing{
  108. font-size: 1rem;
  109. }
  110. .track-name{
  111. font-size: 2.5rem;
  112. }
  113. .track-artist{
  114. margin-top: 5px;
  115. font-size: 1.5rem;
  116. }
  117. .buttons{
  118. display: flex;
  119. flex-direction: row;
  120. align-items: center;
  121. }
  122. .active{
  123. color: black;
  124. }
  125. .repeat-track,
  126. .random-track,
  127. .playpause-track,
  128. .prev-track,
  129. .next-track{
  130. padding: 25px;
  131. opacity: 0.8;
  132. transition: opacity .2s;
  133. }
  134. .repeat-track:hover,
  135. .random-track:hover,
  136. .playpause-track:hover,
  137. .prev-track:hover,
  138. .next-track:hover{
  139. opacity: 1.0;
  140. }
  141. .duration{
  142. width: 400px;
  143. }
  144. .slider_container{
  145. display: flex;
  146. justify-content: center;
  147. align-items: center;
  148. }
  149. .seek_slider,
  150. .volume_slider{
  151. -webkit-appearance: none;
  152. -moz-appearance: none;
  153. appearance: none;
  154. height: 5px;
  155. background: #83a9ff;
  156. -webkit-transition: .2s;
  157. transition: opacity .2s;
  158. }
  159. .seek_slider::-webkit-slider-thumb,
  160. .volume_slider::-webkit-slider-thumb{
  161. -webkit-appearance: none;
  162. -moz-appearance: none;
  163. appearance: none;
  164. width: 15px;
  165. height: 15px;
  166. background: white;
  167. border: 3px solid #3774ff;
  168. cursor: pointer;
  169. border-radius: 100%;
  170. }
  171. .seek_slider:hover,
  172. .volume_slider:hover{
  173. opacity: 1.0;
  174. }
  175. .seek_slider{
  176. width: 80%;
  177. }
  178. .volume_slider{
  179. width: 30%;
  180. }
  181. .current-time,
  182. .total-duration{
  183. padding: 20px;
  184. }
  185. i.fa-volume-down,
  186. i.fa-volume-up{
  187. padding: 10px;
  188. }
  189. i,
  190. i.fa-play-circle,
  191. i.fa-pause-circle,
  192. i.fa-step-forward,
  193. i.fa-step-backward{
  194. cursor: pointer;
  195. }
  196. .randomActive{
  197. color: black;
  198. }