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 #audioPlayer
 130 {
 131         position:absolute;
 132         display:none;
 133         width: 90%;
 134         height: 80%;
 135         left: 5%;
 136         right: 5%;
 137         top: 10%;
 138         bottom: 10%;
 139 }
 140
 141 #videoPlayer
 142 {
 143         position:absolute;
 144         display:none;
 145         width: 100%;
 146         height: 100%;
 147         left: 0%;
 148         right: 0%;
 149         top: 0%;
 150         bottom: 0%;
 151 }
 152
 153 #imagePlayer
 154 {
 155         position:absolute;
 156         background-size: contain;
 157         display:none;
 158         width: 100%;
 159         height: 100%;
 160         left: 0%;
 161         right: 0%;
 162         top: 0%;
 163         bottom: 0%;
 164 }
 165
 166 .mediaList
 167 {
 168         position:absolute;
 169         display:none;
 170         width: 90%;
 171         height: 80%;
 172         left: 5%;
 173         right: 5%;
 174         top: 10%;
 175         bottom: 10%;
 176 }
 177
 178 .mediaList.mediaListAudioList
 179 {
 180         height: 58%;
 181         left: 5%;
 182         right: 5%;
 183         top: 40%;
 184 }
 185
 186 .mediaList.mediaListAudioList.landscape
 187 {
 188         height: 50%;
 189         top: 45%;
 190 }
 191
 192 .mediaList { overflow: auto; width:90%; height: 75%; left: 5%; right: 5%; }
 193
 194 .mediaList ul { list-style: none;  overflow: auto; -webkit-padding-start: 0px;}
 195
 196 .mediaList ul li a { position:absolute; display:block; overflow: auto; background-color:rgba(50, 50, 50, 0.5);
 197    padding-left:15px; padding-top:5px; padding-bottom:5px;  border-radius: 20px; -webkit-border-radius: 20px;}
 198
 199 .mediaList ul li a.lightColor { position:absolute; display:block; overflow: auto; background-color:rgba(150, 150, 250, 0.5);
 200    padding-left:15px; padding-top:5px; padding-bottom:5px;  border-radius: 20px; -webkit-border-radius: 20px;}
 201
 202 /********************** Night versions ***********************/
 203
 204 html.night
 205 {
 206         background-color: black;
 207         min-height: 100%;
 208         background-size:cover;
 209 }
 210
 211 .mediaList ul li a.night { position:absolute; display:block; overflow: auto; background-color:rgba(180, 180, 180, 0.5);
 212    padding-left:15px; padding-top:5px; padding-bottom:5px;  border-radius: 20px; -webkit-border-radius: 20px;}
 213
 214 .mediaList ul li a.lightColor.night { position:absolute; display:block; overflow: auto; background-color:rgba(18, 18, 18, 0.5);
 215    padding-left:15px; padding-top:5px; padding-bottom:5px;  border-radius: 20px; -webkit-border-radius: 20px;}
 216
 217 #mainMusicButton.night
 218 {
 219         content:url(../images/musicButtonNight.png);
 220 }
 221
 222 #mainVideoButton.night
 223 {
 224         content:url(../images/videoButtonNight.png);
 225 }
 226
 227 #mainImageButton.night
 228 {
 229         content:url(../images/imageButtonNight.png);
 230 }
 231
 232 #backButton.night
 233 {
 234         content:url(../images/backButtonNight.png);
 235 }
 236
 237 #nextButton.night
 238 {
 239         content:url(../images/nextButtonNight.png);
 240 }
 241
 242 #returnButton.night
 243 {
 244         content:url(../images/returnButtonNight.png);
 245 }
 246
 247 #listButton.night
 248 {
 249         content:url(../images/listIconNight.png);
 250 }
 251
 252 #playButton.night
 253 {
 254         content:url(../images/playButtonNight.png);
 255 }
 256
 257 #playButton.night.playing
 258 {
 259         content:url(../images/pauseButtonNight.png);
 260 }
 261
 262 #sortAllButton.night
 263 {
 264         content:url(../images/allButtonNight.png);
 265 }
 266
 267 #sortArtistButton.night
 268 {
 269         content:url(../images/artistButtonNight.png);
 270 }
 271
 272 #sortAlbumButton.night
 273 {
 274         content:url(../images/albumButtonNight.png);
 275 }