123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148 |
- body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- .main{
- width: 100%;
- }
- .logo {
- width: 50px;
- }
- .logoimg{
- width: 50px;
- }
- code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
- }
- .card {
- color:black;
- text-decoration: none;
- }
- .rounded-5 {
- border-radius: 20px!important;
- }
- .player{
- padding-top: 20px;
- }
- .wrapper{
- border: 1px solid transparent;
- padding: 30px;
- border-radius: 20px;
- box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
- }
- .details{
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- }
- .track-art{
- height: 250px;
- width: 250px;
- background-size: cover;
- background-position: center;
- -moz-border-radius:20px;
- -webkit-border-radius:20px;
- border-radius: 20px;
- }
- .now-playing{
- font-size: 1rem;
- }
- .track-name{
- font-size: 2.5rem;
- }
- .track-artist{
- margin-top: 5px;
- font-size: 1.5rem;
- }
- .buttons{
- display: flex;
- flex-direction: row;
- align-items: center;
- }
- .active{
- color: black;
- }
- .repeat-track,
- .random-track,
- .playpause-track,
- .prev-track,
- .next-track{
- padding: 25px;
- opacity: 0.8;
- transition: opacity .2s;
- }
- .repeat-track:hover,
- .random-track:hover,
- .playpause-track:hover,
- .prev-track:hover,
- .next-track:hover{
- opacity: 1.0;
- }
- .duration{
- width: 400px;
- }
- .slider_container{
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .seek_slider,
- .volume_slider{
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- height: 5px;
- background: #83a9ff;
- -webkit-transition: .2s;
- transition: opacity .2s;
- }
- .seek_slider::-webkit-slider-thumb,
- .volume_slider::-webkit-slider-thumb{
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- width: 15px;
- height: 15px;
- background: white;
- border: 3px solid #3774ff;
- cursor: pointer;
- border-radius: 100%;
- }
- .seek_slider:hover,
- .volume_slider:hover{
- opacity: 1.0;
- }
- .seek_slider{
- width: 80%;
- }
- .volume_slider{
- width: 30%;
- }
- .current-time,
- .total-duration{
- padding: 20px;
- }
- i.fa-volume-down,
- i.fa-volume-up{
- padding: 10px;
- }
- i,
- i.fa-play-circle,
- i.fa-pause-circle,
- i.fa-step-forward,
- i.fa-step-backward{
- cursor: pointer;
- }
- .randomActive{
- color: black;
- }
|