css/style.css

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