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

   1 @viewport{
   2         zoom: 1;
   3         user-zoom: fixed;
   4 }
   5
   6 .wrapper {
   7         width: 720px;
   8         height: 1280px;
   9         overflow: hidden;
  10         position: absolute;
  11         top: 0;
  12         left: 0;
  13 }
  14
  15 .wrapper .backGround {
  16         position: absolute;
  17         width: 720px;
  18         height: 1280px;
  19         top: 0;
  20         left: 0;
  21         -webkit-perspective: 1000;
  22         -webkit-transition: -webkit-transform, opacity 1000ms ease-out;
  23         -webkit-transition-duration: 500ms;
  24         opacity: 0;
  25 }
  26
  27 .wrapper .live {
  28         -webkit-transition: -webkit-transform, opacity 2000ms ease-out;
  29 }
  30
  31 .dateTime {
  32         top: 0;
  33         opacity: 0.3;
  34         z-index: 2;
  35         -webkit-transform: translate3d(0px, -200px, 0);
  36         transform: translate3d(0px, -200px, 0);
  37 }
  38
  39 .showDT {
  40         opacity: 1;
  41         -webkit-transform: translate3d(0px, 0px, 0);
  42         transform: translate3d(0px, 0px, 0);
  43         -webkit-transition: -webkit-transform 400ms ease-out, opacity 400ms
  44                 ease-in;
  45 }
  46
  47 .topBarIcons {
  48         opacity: 0.3;
  49         z-index: 4;
  50         -webkit-transform: translate3d(0px, -200px, 0);
  51         transform: translate3d(0px, -200px, 0);
  52         -webkit-transition: -webkit-transform 400ms ease-out, opacity 400ms
  53                 ease-in;
  54 }
  55
  56 .showTBI {
  57         opacity: 1;
  58         -webkit-transform: translate3d(0px, 0px, 0);
  59         transform: translate3d(0px, 0px, 0);
  60 }
  61
  62 .indSize {
  63         position: absolute;
  64         width: 200px;
  65         height: 200px;
  66 }
  67
  68 .indicator {
  69         -webkit-transition: -webkit-transform 300ms ease-out, opacity 500ms;
  70         -webkit-transform: translate3d(260px, 575px, 0) scale(0);
  71         transform: translate3d(260px, 575px, 0) scale(0);
  72         -webkit-perspective: 10000;
  73         float: left;
  74         opacity: 0;
  75         z-index: 2;
  76 }
  77
  78 .showI {
  79         -webkit-transform: translate3d(260px, 575px, 0) scale(1);
  80         transform: translate3d(260px, 575px, 0) scale(1);
  81         opacity: 1;
  82 }
  83
  84 .centerIco {
  85         position: absolute;
  86         top: 60px;
  87         left: 60px;
  88         width: 80px;
  89         height: 80px;
  90         display: block;
  91 }
  92
  93 .corpus {
  94         -webkit-perspective: 1000;
  95         -webkit-transition: -webkit-transform;
  96         -webkit-transform: translate3d(0px, 0px, 0);
  97         transform: translate3d(0px, 0px, 0);
  98         -webkit-transition-duration: 1500ms;
  99 }
 100
 101 .item {
 102         position: absolute;
 103         -webkit-transition: -webkit-transform 400ms ease-out, opacity 700ms
 104                 ease-out;
 105         /*      -webkit-transform: translate3d(0px,0px,0);*/
 106         -webkit-perspective: 1000;
 107         opacity: 0;
 108         height: 535px;
 109         width: 528px;
 110         text-transform: uppercase;
 111 }
 112
 113 .abs {
 114         position: absolute;
 115 }
 116
 117 .item.selected img {
 118         opacity: 0.8;
 119         -webkit-transition: opacity 300ms ease-in
 120 }
 121
 122 .item img {
 123         position: absolute;
 124         top: 0;
 125         left: 0;
 126         opacity : 0;
 127         -webkit-transition: opacity 500ms ease-out;
 128 }
 129
 130 .sector1 {
 131         -webkit-transform: translate3d(110px, 148px, 0px);
 132         transform: translate3d(110px, 148px, 0px);
 133 }
 134
 135 .sector1icon {
 136         top: 110px;
 137         left: 120px;
 138         width: 44px;
 139         height: 33px;
 140 }
 141
 142 .sector1street {
 143         top: 110px;
 144         left: 180px;
 145         width: 280px;
 146         overflow: hidden;
 147         text-align: left;
 148 }
 149
 150 .sector1distance {
 151         top: 140px;
 152         left: 180px;
 153 }
 154
 155 .sector2 {
 156         -webkit-transform: translate3d(392px, 324px, 0px);
 157         transform: translate3d(392px, 324px, 0px);
 158         text-align: center;
 159 }
 160
 161 .sector2valInterior {
 162         top: 120px;
 163         left: 160px;
 164         width: 150px;
 165         overflow: hidden;
 166 }
 167
 168 .sector2Interior {
 169         top: 170px;
 170         left: 160px;
 171         width: 150px;
 172 }
 173
 174 .sector2valExterior {
 175         top: 210px;
 176         left: 100px;
 177         width: 150px;
 178         overflow: hidden;
 179 }
 180
 181 .sector2Exterior {
 182         top: 260px;
 183         left: 100px;
 184         width: 150px;
 185 }
 186
 187 .sector3 {
 188         -webkit-transform: translate3d(402px, 630px, 0px);
 189         transform: translate3d(402px, 630px, 0px);
 190         overflow: hidden;
 191         text-align: center;
 192 }
 193
 194 .sector3header {
 195         top: 65px;
 196         left: 65px;
 197         width: 250px;
 198 }
 199
 200 .sector3title {
 201         top: 85px;
 202         left: 65px;
 203         width: 250px;
 204 }
 205
 206 .sector3subHeader {
 207         top: 115px;
 208         left: 90px;
 209         width: 200px;
 210 }
 211
 212 .sector4 {
 213 /*      -webkit-transform: translate3d(314px, 724px, 0px);
 214         transform: translate3d(314px, 724px, 0px);
 215 */      -webkit-transform: translate3d(340px, 703px, 0px) rotateZ(-5deg);
 216         transform: translate3d(340px, 703px, 0px) rotateZ(-5deg);
 217 }
 218
 219 .sector4name {
 220         top: 200px;
 221         left: 60px;
 222         width: 150px;
 223         height: 80px;
 224         text-align: left;
 225         overflow: hidden;
 226 }
 227
 228 .sector5 {
 229         -webkit-transform: translate3d(44px, 702px, 0px);
 230         transform: translate3d(44px, 702px, 0px);
 231 }
 232
 233 .sector6 {
 234         -webkit-transform: translate3d(0px, 590px, 0px);
 235         transform: translate3d(0px, 590px, 0px);
 236 }
 237
 238 .sector6postsWrapper {
 239         top: 70px;
 240         left: 25px;
 241         width: 205px;
 242         height: 90px;
 243 }
 244
 245 .sector6row {
 246         width: 100%;
 247         height: 18px;
 248         overflow: hidden;
 249         text-align: left;
 250 }
 251
 252 .sector6icon {
 253         top: 1px;
 254         width: 15px;
 255         height: 15px;
 256         float: left;
 257 }
 258
 259 .sector6time {
 260         width: 65px;
 261         float: left;
 262         margin-right: 5px;
 263         text-align: right;
 264 }
 265
 266 .sector6text {
 267         float: left;
 268         text-align: right;
 269 }
 270
 271 .sector7 {
 272         -webkit-transform: translate3d(0px, 316px, 0px);
 273         transform: translate3d(0px, 316px, 0px);
 274 }
 275
 276 .sector7iconSpeed {
 277         top: 135px;
 278         left: 10px;
 279         width: 37px;
 280         height: 35px;
 281 }
 282
 283 .sector7valSpeed {
 284         top: 115px;
 285         right: 390px;
 286         text-align: right;
 287 }
 288
 289 .sector7SpeedUnits {
 290         top: 155px;
 291         left: 145px;
 292         text-transform: lowercase;
 293 }
 294
 295 .sector7iconBattery {
 296         top: 200px;
 297         left: 10px;
 298         width: 37px;
 299         height: 23px;
 300 }
 301
 302 .sector7valBatteryPerc {
 303         top: 197px;
 304         left: 50px;
 305         width: 70px;
 306         text-align: right;
 307 }
 308
 309 .sector7valRange {
 310         top: 197px;
 311         left: 125px;
 312 }
 313
 314 .bottomPanel {
 315         opacity: 0.3;
 316         z-index: 4;
 317         -webkit-transform: translate3d(0px, 200px, 0);
 318         transform: translate3d(0px, 200px, 0);
 319 }
 320
 321 .showBP {
 322         opacity: 1;
 323         -webkit-transform: translate3d(0px, 0px, 0);
 324         transform: translate3d(0px, 0px, 0);
 325         -webkit-transition: -webkit-transform 400ms ease-out, opacity 400ms
 326                 ease-in;
 327 }
 328
 329 .volumeControl {
 330         z-index: 4;
 331         position: absolute;
 332         top: 100px;
 333         left: 450px;
 334         width: 240px;
 335         height: 50px;
 336 }
 337
 338 .audioButtons {
 339         position: absolute;
 340         top: 110px;
 341         left: 53px;
 342 }
 343
 344 .controlsBtn {
 345         z-index: 4;
 346         position: absolute;
 347         width: 28px;
 348         height: 28px;
 349 }
 350
 351 .previousBtn {
 352         opacity: 1;
 353 }
 354
 355 .prevBtnInactive {
 356         opacity: 0.5;
 357 }
 358
 359 .previousBtnActive {
 360         opacity: 1;
 361 }
 362
 363 .pauseBtn {
 364         opacity: 1;
 365         left: 96px;
 366 }
 367
 368 .playBtn {
 369         opacity: 1;
 370         left: 96px;
 371 }
 372
 373 .nextBtn {
 374         opacity: 1;
 375         left: 191px;
 376 }
 377
 378 .nextBtnInactive {
 379         opacity: 0.5;
 380         left: 191px;
 381 }
 382
 383 .nextBtnActive {
 384         opacity: 1;
 385         left: 191px;
 386 }
 387
 388 .actionsCatcher {
 389         position: absolute;
 390         width: 100%;
 391         height: 100%;
 392         z-index: 3;
 393         opacity: 0;
 394 }
 395
 396 .homeScrAppGridView {
 397         position: absolute;
 398         top: 0;
 399         left: 0;
 400         width: 654px;
 401         height: 1214px;
 402         z-index: 5;
 403         padding: 33px;
 404         display: none;
 405         overflow-x: hidden;
 406         overflow-y: scroll;
 407 }
 408
 409 .HSAGWHeading {
 410         text-transform: uppercase;
 411         margin: 0 0 25px 0;
 412 }
 413
 414 .homeScrAppGridFrame {
 415         width: 212px;
 416         height: 212px;
 417         background-color: rgb(0, 0, 0);
 418         background-color: rgba(0, 0, 0, 0.2);
 419         float: left;
 420         margin: 3px;
 421         text-align: center;
 422 }
 423
 424 .homeScrAppGridText {
 425         background-color: rgb(0, 0, 0);
 426         background-color: rgba(0, 0, 0, 0.4);
 427         position: absolute;
 428         bottom: 0;
 429         left: 0;
 430         width: 100%;
 431         height: 80px;
 432 }
 433
 434 .homeScrAppGridView .exitButton {
 435         position: absolute;
 436         top: 25px;
 437         right: 25px;
 438         width: 42px;
 439         height: 42px;
 440 }
 441
 442 .homeScrAppGridTitle {
 443         position: absolute;
 444         bottom: 29px;
 445         right: 0;
 446         left: 0;
 447         text-transform: uppercase;
 448         line-height: 25px;
 449 }
 450
 451 .homeScrAppGridCategory {
 452         font-weight: normal;
 453         line-height: 25px;
 454         font-size: 16px;
 455         display: none;
 456 }
 457
 458 .homeScrAppGridImg img {
 459         margin: 0 auto;
 460         width: 120px;
 461         height: 120px;
 462 }
 463
 464 /* ICONS */
 465 .iconSpeed {
 466         background-image: url("./images/icon_speedmeter.png");
 467 }
 468
 469 .iconLeftImg {
 470         background-image: url("./images/icon_direction_left.png");
 471 }
 472
 473 .iconFacebook {
 474         background-image: url("images/icon_facebook.png");
 475 }
 476
 477 .iconTwitter {
 478         background-image: url("images/icon_twitter.png");
 479 }
 480
 481 /* Animations */
 482 .rollRight {
 483     -webkit-animation-name: rotateR;
 484     -webkit-animation-duration: 10s;
 485     -webkit-animation-delay: 0s;
 486     -webkit-animation-timing-function: linear;
 487     -webkit-animation-iteration-count: infinite;
 488     -webkit-animation-play-state: paused;
 489 }
 490
 491 .rollLeft {
 492     -webkit-animation-name: rotateL;
 493     -webkit-animation-duration: 10s;
 494     -webkit-animation-delay: 0s;
 495     -webkit-animation-timing-function: linear;
 496     -webkit-animation-iteration-count: infinite;
 497     -webkit-animation-play-state: paused;
 498 }
 499
 500 .liveBg {
 501     -webkit-animation-name: live;
 502     -webkit-animation-duration: 7s;
 503     -webkit-animation-delay: 0s;
 504     -webkit-animation-timing-function: ease-out;
 505     -webkit-animation-iteration-count: infinite;
 506     -webkit-transition: opacity 500ms ease-out;
 507     -webkit-animation-play-state: paused;
 508 }
 509
 510 @-webkit-keyframes rotateR {
 511     0%          {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
 512     50%         {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);}
 513     100%        {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);}
 514 }
 515
 516 @-webkit-keyframes rotateL {
 517     0%          {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);}
 518     50%         {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);}
 519     100%        {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
 520 }
 521
 522 @-webkit-keyframes live {
 523         0%              {opacity: 0.4;}
 524         15%             {opacity: 1;}
 525         55%             {opacity: 0.4;}
 526         100%    {opacity: 0.4;}
 527 }