css/style.css

   1 /*carousel control*/
   2
   3 .carousel {
   4         position: absolute;
   5         top: 230px;
   6         left: 0; /* 5px; */
   7         width: 12000px;
   8         height: 480px;
   9         padding: 0;
  10         margin: 0;
  11         -webkit-transition: 2s;
  12     -moz-transition: 2s;
  13     -ms-transition: 2s;
  14     -o-transition: 2s;
  15     transition: 2s;
  16 }
  17
  18 .carouselItem {
  19         float: left;
  20         width: 240px;
  21         margin-left: 10px;
  22         margin-right: 10px;
  23         padding: 0;
  24 }
  25
  26 .carouselItemSelected {
  27         box-shadow: 0 0 5px 1px #1DA2FF
  28 }
  29
  30 .carouselImage {
  31         width: 240px;
  32         height: 240px;
  33 }
  34
  35 .albumCarouselDescription {
  36         width: 240px;
  37         height: 95px;
  38         bottom: 95px;
  39 }
  40
  41 .albumCarouselDescriptionText {
  42         text-align: center;
  43         top: 20px;
  44 }
  45
  46 .carouselShadow {
  47         position: relative;
  48         width: 240px;
  49         height: 50px;
  50         top: -100px;
  51         opacity: 0.2;
  52         display: none;
  53         -webkit-transform: rotateX(180deg);
  54         -webkit-transform-origin: 50% 50%;
  55         -moz-transform: rotateX(180deg);
  56         -moz-transform: 50% 50%;
  57     -ms-transform: rotateX(180deg);
  58         -ms-transform: 50% 50%;
  59     -o-transform: rotateX(180deg);
  60         -o-transform: 50% 50%;
  61     transform: rotateX(180deg);
  62     transform: 50% 50%;
  63 }
  64
  65 .backgroundAudioClass {
  66         position: absolute;
  67         top: 0;
  68         left: 0;
  69         width: 720px;
  70         height: 1280px;
  71         -webkit-background-size: cover;
  72         -moz-background-size: cover;
  73     -ms-background-size: cover;
  74     -o-background-size: cover;
  75     background-size: cover;
  76 }
  77
  78 /* spectrum analyzer */
  79 .spectrumAnalyzer {
  80         position: absolute;
  81         top: 775px;
  82         left: 300px;
  83         width: 400px;
  84         height: 110px;
  85 }
  86
  87 .barAnalyzer {
  88         position: absolute;
  89         width: 33px;
  90         height: 5px;
  91         float: left;
  92         margin-left: 5px;
  93 }
  94
  95 .bar1Class {
  96         left: 0;
  97 }
  98
  99 .bar2Class  {
 100         left: 38px;
 101 }
 102
 103 .bar3Class  {
 104         left: 76px;
 105 }
 106
 107 .bar4Class  {
 108         left: 114px;
 109 }
 110
 111 .bar5Class  {
 112         left: 152px;
 113 }
 114
 115 .bar6Class  {
 116         left: 190px;
 117 }
 118
 119 .bar7Class  {
 120         left: 228px;
 121 }
 122
 123 .bar8Class  {
 124         left: 266px;
 125 }
 126
 127 .bar9Class {
 128         left: 304px;
 129 }
 130
 131 .bar10Class  {
 132         left: 342px;
 133 }
 134
 135 /* text panel artist, album, song title */
 136 .currentlyPlayingPreviewClass {
 137         position: absolute;
 138         top: 588px;
 139         left: 55px;
 140 }
 141
 142 .textPanel {
 143         position: absolute;
 144         width: 405px;
 145         height:100px;
 146         top: 577px;
 147         left: 338px;
 148 }
 149
 150 .blueIconText {
 151         position: relative;
 152         height: 25px;
 153 }
 154
 155 /* time progress bar and remaining time */
 156 .timeBarClass {
 157         position: relative;
 158         bottom: 0;
 159         width: 325px;
 160         height: 80px;
 161         font-size: large;
 162 }
 163
 164 .volumeControlClass {
 165         position: absolute;
 166         top: 928px;
 167         left: 35px;
 168         width: 660px;
 169         height: 60px;
 170         background: none;
 171 }
 172
 173 .progressPot {
 174         position: absolute;
 175         top: 4px;
 176         left: 0;
 177         width: 100%;
 178         height: 3px;
 179 }
 180
 181 .progressBar {
 182         position: absolute;
 183         top: 50px;
 184         left: 0;
 185         width: 325px;
 186         height: 10px;
 187         border-style: solid;
 188         border-width: 0 0 1px 0;
 189 }
 190
 191 .leftText {
 192         position: absolute;
 193         top: 10px;
 194         left: 0;
 195         width: 40px;
 196         height: 15px;
 197 }
 198
 199 .rightText {
 200         position: absolute;
 201         top: 10px;
 202         right: 25px;
 203         width: 40px;
 204         height: 15px;
 205 }
 206
 207 /*audio controls*/
 208 .audioControlsButtons {
 209         position: absolute;
 210         top: 1030px;
 211         left: 0;
 212         width: 700px;
 213         height: 100px;
 214 }
 215
 216 .previousBtn {
 217         opacity: 1;
 218         width: 28px;
 219         height: 28px;
 220         background-repeat: no-repeat;
 221         float: left;
 222         margin-right: 55px;
 223         margin-left: 60px;
 224 }
 225
 226 .prevBtnInactive {
 227         opacity: 0.5;
 228         width: 28px;
 229         height: 28px;
 230         background-repeat: no-repeat;
 231         float: left;
 232         margin-right: 55px;
 233         margin-left: 60px;
 234 }
 235
 236 .pauseBtn {
 237         opacity: 1;
 238         width: 28px;
 239         height: 28px;
 240         background-repeat: no-repeat;
 241         float: left;
 242         margin-right: 55px;
 243         margin-left: 60px;
 244 }
 245
 246 .playBtn {
 247         opacity: 1;
 248         width: 28px;
 249         height: 28px;
 250         background-repeat: no-repeat;
 251         float: left;
 252         margin-right: 55px;
 253         margin-left: 60px;
 254 }
 255
 256 .nextBtn {
 257         opacity: 1;
 258         width: 28px;
 259         height: 28px;
 260         background-repeat: no-repeat;
 261         float: left;
 262         margin-right: 55px;
 263         margin-left: 60px;
 264 }
 265
 266 .nextBtnInactive {
 267         opacity: 0.5;
 268         width: 28px;
 269         height: 28px;
 270         background-repeat: no-repeat;
 271         float: left;
 272         margin-right: 55px;
 273         margin-left: 60px;
 274 }
 275
 276 .shuffleBtn {
 277         width: 45px;
 278         height: 33px;
 279         background-repeat: no-repeat;
 280         float: left;
 281         margin-right: 35px;
 282         margin-left: 60px;
 283 }
 284
 285 .repeatBtn {
 286         width: 45px;
 287         height: 33px;
 288         background-repeat: no-repeat;
 289         float: left;
 290         margin-right: 0;
 291         margin-left: 60px;
 292 }
 293
 294 .previousBtnActive {
 295         opacity: 1;
 296         width: 28px;
 297         height: 28px;
 298         background-repeat: no-repeat;
 299         float: left;
 300         margin-right: 55px;
 301         margin-left: 60px;
 302 }
 303
 304 .nextBtnActive {
 305         opacity: 1;
 306         width: 28px;
 307         height: 28px;
 308         background-repeat: no-repeat;
 309         float: left;
 310         margin-right: 55px;
 311         margin-left: 60px;
 312 }
 313
 314 .shuffleBtnActive {
 315         width: 45px;
 316         height: 33px;
 317         background-repeat: no-repeat;
 318         float: left;
 319         margin-right: 35px;
 320         margin-left: 60px;
 321 }
 322
 323 .repeatBtnActive {
 324         width: 45px;
 325         height: 33px;
 326         background-repeat: no-repeat;
 327         float: left;
 328         margin-right: 0;
 329         margin-left: 60px;
 330 }
 331
 332 .songNameTextPosition {
 333         top: 12px;
 334 }
 335
 336 .artistNameTextMargin {
 337         margin-bottom: 5px;
 338 }