css/style.css

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