Music-App/style.css at main · krishna-3028/Music-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
@import "tailwindcss";
@layer components{
    .left{
        @apply max-[880px]:absolute  left-[-1000px] z-10 h-screen max-[880px]:w-[360px] w-[420px] max-[337px]:w-[282px] bg-black
    }
    .hamburger{
        @apply ml-2 max-[880px]:block hidden cursor-pointer
    }
    .cross{
        @apply h-6 mt-2 mr-2 cursor-pointer hidden max-[880px]:block
    }
    .leftBox-home{
        background-color: #121212;
        @apply  pb-3 font-semibold border-none rounded-md text-sm text-gray-200 flex
    }
    .leftBox-library{
        background-color: #121212;
        @apply font-semibold border-none rounded-md mt-3 pt-3  text-gray-200 h-[500px]
    }
    .leftBox-footer{
        @apply text-xs underline font-sans text-gray-500 mt-40 absolute bottom-0 flex px-5 gap-3 max-[369px]:bottom-0 overflow-x-hidden
    }
    .header{
        @apply  flex  justify-between bg-black
    }
    .header1{
        @apply text-xs text-gray-200 flex gap-6 py-6
    }
    .header2{
        @apply mr-4 py-2
    }
    .listHead{
        @apply flex justify-between
    }
    .card{
        background-color: #252525;
        color: white;
        @apply h-70 w-50 border border-none rounded-sm pl-5 m-3 relative max-[369px]:w-80 max-[369px]:h-90 transition-all duration-100 hover:bg-[#3c3d3d]  cursor-pointer max-[293px]:mx-0
    }
    .cardContainer{
        @apply flex justify-center flex-wrap h-[60vh] overflow-scroll mb-5 max-[369px]:h-[74vh]
    }
    .svgProperty{
        @apply absolute right-6 size-9 top-26 opacity-0 transition-all duration-300 hover:top-35 hover:opacity-100
    }
    .playBar{
        background-color: #252323;
        @apply sticky bottom-0 w-[96%] py-1  border  border-none rounded-2xl h-24  flex flex-col justify-center ml-6 max-[369px]:w-[87vw]  max-[369px]:mt-6 max-[369px]:rounded-none max-[396px]:h-44  max-[369px]:pb-18
        max-[539px]:h-40 max-[539px]:w-[490px] mt-20  max-[510px]:w-[90vw] max-[1015px]:w-[70vw] max-[879px]:w-[95vw]  max-[337px]:w-full  max-[337px]:ml-0  max-[1049px]:ml-2  max-[1049px]:mr-2 max-[879px]:ml-4
    }
    .trackController{
        @apply flex justify-center gap-4 cursor-pointer  max-[572px]:px-5

    }
    .songList{
        @apply h-111 overflow-scroll cursor-pointer  max-[369px]:h-94
        /* to hide the content or display a scroll bar we first gotta set the height of the div. */
    }
    ul li{
        @apply border border-white mt-3 rounded-sm py-2 pl-2 text-sm
    }
    .seekBar{
        @apply lg:w-[96%] h-1 bg-white rounded-sm ml-3 my-3 cursor-pointer max-[369px]:w-[80vw] max-[539px]:w-[85vw] max-[337px]:w-[90%]
    }
    .circle{
        bottom: 3px;
        @apply size-3 rounded-4xl bg-white relative
    }
    .barElements{
        @apply text-white flex justify-between px-6 max-[369px]:size-6 max-[369px]:mb-5 max-[369px]:flex-col
         max-[369px]:items-center  max-[369px]:ml-32  max-[369px]:gap-2  max-[539px]:flex-col max-[539px]:items-center max-[539px]:gap-2.5
    }
    .songInfo{
        @apply w-40  text-center
    }
    .songDuration{
        @apply w-30 max-[369px]:text-center
    }
    .img{
        @apply h-40 my-3 border border-none rounded-sm max-[369px]:h-70  max-[321px]:ml-[-10px]
    }
    .volBar{
        @apply w-20 cursor-pointer
    }
    .volumeController{
        @apply mt-[3px] flex gap-2
    }
}
/* inside theme we can set custom tailwind css classes */
@theme{

}