css/style.css

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