123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290 |
- /* Customize website's scrollbar like Mac OS
- Not supports in Firefox and IE */
- /* total width */
- ::-webkit-scrollbar {
- background-color: #fff;
- width: 5px;
- }
- /* background of the scrollbar except button or resizer */
- ::-webkit-scrollbar-track {
- background-color: #fff;
- }
- /* scrollbar itself */
- ::-webkit-scrollbar-thumb {
- background-color: #606060bc;
- border-radius: 2px;
- border: none;
- }
- /* set button(top and bottom of the scrollbar) */
- ::-webkit-scrollbar-button {
- display:none;
- }
- 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;
- }
- .playlist-img-box{
- min-height: 180px;
- min-width: 180px;
- max-height: 180px;
- max-width: 180px;
- overflow: hidden;
- }
- .cursor-pointer {
- cursor: pointer;
- }
- .playlist-title {
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .track-name .line {
- /*width: 100px;*/
- display: inline-flex;
- }
- .track-name .second {
- display: inline-flex;
- white-space: nowrap;
- overflow: hidden;
- animation-play-state: paused;
- }
- .track-name .line .second span {
- animation: ticker 6s linear infinite;
- }
- @keyframes ticker {
- 0% {
- transform: translate(40%, 0);
- }
- 50% {
- transform: translate(-40%, 0);
- }
- 100% {
- transform: translate(40%, 0);
- }
- }
- .playlist-play-box{
- bottom: 15px;
- right: 15px;
- }
- .preview-tracks-block{
- max-height: 200px;
- overflow:auto;
- }
- .playlist-grey-box{
- background: rgba(0, 0, 0, 0.54);
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%
- }
- .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;
- position: sticky;
- top: 50px;
- }
- .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: 1.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;
- }
- .tab-content{
- max-height: 490px;
- }
- .playing-list{
- max-height: inherit;
- overflow: auto;
- }
- .accordion-button{
- background: inherit!important;
- color: inherit!important;
- border: none!important;
- text-decoration: underline;
- }
- .nav-avatar{
- width: 50px;
- height: 50px;
- border: 2px solid white;
- /*border-radius: ;*/
- }
- .dropdown-menu a{
- display: block;
- width: 100%;
- padding: 0.25rem 1rem;
- clear: both;
- font-weight: 400;
- color: #212529;
- text-align: inherit;
- text-decoration: none;
- white-space: nowrap;
- background-color: transparent;
- border: 0;
- }
- .dropdown-menu a:hover{
- color: #1e2125;
- background-color: #e9ecef;
- cursor: pointer;
- }
- .artist-search-name {
- text-align: center;
- overflow: hidden;
- z-index: 1;
- font-size: 1rem;
- max-width: 100px;
- max-height: 100px;
- }
- .active-track {
- background-color: rgba(255, 255, 255, 0.152)!important;
- --bs-table-accent-bg: var(--bs-table-hover-bg);
- color: var(--bs-table-hover-color);
- }
- .disactive-track {
- background-color: inherit!important;
- }
- .disactive-track-icon {
- display: none;
- }
|