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