samples/web/Sample/Tizen/Web App/ModelloSmartDeviceLink/project/css/style.css

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