css/main.css

   1 /*
   2  * Copyright (c) 2013, Intel Corporation.
   3  *
   4  * This program is licensed under the terms and conditions of the
   5  * Apache License, version 2.0.  The full text of the Apache License is at
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9
  10 *
  11 {
  12         z-index : 2;
  13 }
  14
  15 html
  16 {
  17         background-color: white;
  18         min-height: 100%;
  19         background-size:cover;
  20 }
  21
  22 #mainMusicButton
  23 {
  24         content:url(../images/musicButton.png);
  25 }
  26
  27 #mainVideoButton
  28 {
  29         content:url(../images/videoButton.png);
  30 }
  31
  32 #mainImageButton
  33 {
  34         content:url(../images/imageButton.png);
  35 }
  36
  37 #backButton
  38 {
  39         content:url(../images/backButton.png);
  40 }
  41
  42 #nextButton
  43 {
  44         content:url(../images/nextButton.png);
  45 }
  46
  47 #returnButton
  48 {
  49         content:url(../images/returnButton.png);
  50 }
  51
  52 #listButton
  53 {
  54         content:url(../images/listIcon.png);
  55 }
  56
  57 #playButton
  58 {
  59         content:url(../images/playButton.png);
  60 }
  61
  62 #playButton.playing
  63 {
  64         content:url(../images/pauseButton.png);
  65 }
  66
  67 #sortAllButton
  68 {
  69         display:none;
  70         content:url(../images/allButton.png);
  71 }
  72
  73 #sortArtistButton
  74 {
  75         display:none;
  76         content:url(../images/artistButton.png);
  77 }
  78
  79 #sortAlbumButton
  80 {
  81         display:none;
  82         content:url(../images/albumButton.png);
  83 }
  84
  85 #mainMenuButtons
  86 {
  87         position: absolute;
  88         display: block;
  89         vertical-align: middle;
  90 }
  91
  92 .mainButton
  93 {
  94         position: relative;
  95         padding: 20px;
  96 }
  97
  98 #sortButtons
  99 {
 100         position: absolute;
 101         display: block;
 102         top: 35%;
 103         left: 0%;
 104         height: 5%;
 105         width: 100%;
 106 }
 107
 108 .sortButton
 109 {
 110         position: relative;
 111         float: left;
 112         height: 100%;
 113         width: 33.333%;
 114 }
 115
 116 #sortButtons.landscape
 117 {
 118         height: 10%;
 119 }
 120
 121 #audioPlayer
 122 {
 123         position:absolute;
 124         display:none;
 125         width: 90%;
 126         height: 80%;
 127         left: 5%;
 128         right: 5%;
 129         top: 10%;
 130         bottom: 10%;
 131 }
 132
 133 #videoPlayer
 134 {
 135         position:absolute;
 136         display:none;
 137         width: 100%;
 138         height: 100%;
 139         left: 0%;
 140         right: 0%;
 141         top: 0%;
 142         bottom: 0%;
 143 }
 144
 145 #imagePlayer
 146 {
 147         position:absolute;
 148         background-size: contain;
 149         display:none;
 150         width: 100%;
 151         height: 100%;
 152         left: 0%;
 153         right: 0%;
 154         top: 0%;
 155         bottom: 0%;
 156 }
 157
 158 .mediaList
 159 {
 160         position:absolute;
 161         display:none;
 162         width: 90%;
 163         height: 80%;
 164         left: 5%;
 165         right: 5%;
 166         top: 10%;
 167         bottom: 10%;
 168 }
 169
 170 .mediaList.mediaListAudioList
 171 {
 172         height: 58%;
 173         left: 5%;
 174         right: 5%;
 175         top: 40%;
 176 }
 177
 178 .mediaList.mediaListAudioList.landscape
 179 {
 180         height: 50%;
 181         top: 45%;
 182 }
 183
 184 .mediaList { overflow: auto; width:90%; height: 75%; left: 5%; right: 5%; }
 185
 186 .mediaList ul { list-style: none;  overflow: auto; -webkit-padding-start: 0px;}
 187
 188 .mediaList ul li a { position:absolute; display:block; overflow: auto; background-color:rgba(50, 50, 50, 0.5);
 189    padding-left:15px; padding-top:5px; padding-bottom:5px;  border-radius: 20px; -webkit-border-radius: 20px;}
 190
 191 .mediaList ul li a.lightColor { position:absolute; display:block; overflow: auto; background-color:rgba(150, 150, 250, 0.5);
 192    padding-left:15px; padding-top:5px; padding-bottom:5px;  border-radius: 20px; -webkit-border-radius: 20px;}
 193
 194 /********************** Night versions ***********************/
 195
 196 html.night
 197 {
 198         background-color: black;
 199         min-height: 100%;
 200         background-size:cover;
 201 }
 202
 203 .mediaList ul li a.night { position:absolute; display:block; overflow: auto; background-color:rgba(180, 180, 180, 0.5);
 204    padding-left:15px; padding-top:5px; padding-bottom:5px;  border-radius: 20px; -webkit-border-radius: 20px;}
 205
 206 .mediaList ul li a.lightColor.night { position:absolute; display:block; overflow: auto; background-color:rgba(18, 18, 18, 0.5);
 207    padding-left:15px; padding-top:5px; padding-bottom:5px;  border-radius: 20px; -webkit-border-radius: 20px;}
 208
 209 #mainMusicButton.night
 210 {
 211         content:url(../images/musicButtonNight.png);
 212 }
 213
 214 #mainVideoButton.night
 215 {
 216         content:url(../images/videoButtonNight.png);
 217 }
 218
 219 #mainImageButton.night
 220 {
 221         content:url(../images/imageButtonNight.png);
 222 }
 223
 224 #backButton.night
 225 {
 226         content:url(../images/backButtonNight.png);
 227 }
 228
 229 #nextButton.night
 230 {
 231         content:url(../images/nextButtonNight.png);
 232 }
 233
 234 #returnButton.night
 235 {
 236         content:url(../images/returnButtonNight.png);
 237 }
 238
 239 #listButton.night
 240 {
 241         content:url(../images/listIconNight.png);
 242 }
 243
 244 #playButton.night
 245 {
 246         content:url(../images/playButtonNight.png);
 247 }
 248
 249 #playButton.night.playing
 250 {
 251         content:url(../images/pauseButtonNight.png);
 252 }
 253
 254 #sortAllButton.night
 255 {
 256         content:url(../images/allButtonNight.png);
 257 }
 258
 259 #sortArtistButton.night
 260 {
 261         content:url(../images/artistButtonNight.png);
 262 }
 263
 264 #sortAlbumButton.night
 265 {
 266         content:url(../images/albumButtonNight.png);
 267 }