css/style.css

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