css/style.css

   1 @viewport{
   2         width: 720px;
   3         height: 1280px;
   4         user-zoom: fixed;
   5 }
   6
   7 .randomizer{
   8         position: absolute;
   9         left: 396px;
  10         top: 564px;
  11         opacity: 0.0;
  12         width: 110px;
  13         height: 110px;
  14
  15         -webkit-transition-timing-function: linear;
  16         -webkit-transition: 1s;
  17
  18         -moz-transition-timing-function: linear;
  19         -moz-transition: 1s;
  20
  21         -ms-transition-timing-function: linear;
  22         -ms-transition: 1s;
  23
  24         -o-transition-timing-function: linear;
  25         -o-transition: 1s
  26
  27 }
  28 .dashboardBackGround {
  29         position: absolute;
  30         left: 0;
  31         top: 0;
  32         width: 720px;
  33         height: 1280px;
  34 }
  35
  36 .dashboardCircleAll {
  37         position: absolute;
  38         left: 0;
  39         top: 0;
  40         width: 720px;
  41         height: 1280px;
  42 }
  43 .whelImage{
  44         width: 65px;
  45         height: 105px;
  46         /*-webkit-transition: 0.1s;*/
  47         -webkit-transition-timing-function: linear;
  48
  49         /*-moz-transition:0.1s;
  50         -moz-transition-timing-function:linear;
  51
  52         -ms-transition:0.1s;
  53         -ms-transition-timing-function:linear;
  54
  55         -o-transition:0.1s;
  56         -o-transition-timing-function:linear;*/
  57
  58
  59 }
  60 .leftWhell{
  61         position: absolute;
  62         left: 225px;
  63         top: 430px;
  64 }
  65 .rightWhell{
  66         position: absolute;
  67         left: 430px;
  68         top: 430px;
  69 }
  70
  71 .carImage {
  72         position: absolute;
  73         left: 0;
  74         top: 0;
  75         width: 720px;
  76         height: 1280px;
  77 }
  78
  79 .batteryLevelCaption {
  80         position: absolute;
  81         left: 15px;
  82         top: 200px;
  83 }
  84
  85 .weatherCaption {
  86         position: absolute;
  87         left: 545px;
  88         top: 200px;
  89 }
  90
  91 .dashboardLineLong {
  92         width: 120px;
  93         height: 10px;
  94 }
  95
  96 .leftFrontPressure {
  97         position: absolute;
  98         left: 30px;
  99         top: 370px;
 100 }
 101
 102 .leftFrontLine {
 103         position: absolute;
 104         left: 130px;
 105         top: 462px;
 106         -webkit-transform: rotate(20deg);
 107         -ms-transform: rotate(20deg);
 108         -moz-transform: rotate(20deg);
 109         -o-transform: rotate(20deg);
 110         transform: rotate(20deg);
 111 }
 112
 113 .rightFrontPressure {
 114         position: absolute;
 115         left: 500px;
 116         top: 340px;
 117 }
 118
 119 .rightFrontLine {
 120         position: absolute;
 121         left: 470px;
 122         top: 445px;
 123
 124         -webkit-transform: rotate(150deg);
 125         -moz-transform: rotate(150deg);
 126         -ms-transform: rotate(150deg);
 127         -o-transform: rotate(150deg);
 128         transform: rotate(150deg);
 129
 130 }
 131
 132 .engineStatus {
 133         position: absolute;
 134         left: 520px;
 135         top: 540px;
 136 }
 137
 138 .engineStatus .gearboxStatus {
 139         position: absolute;
 140         left: 110px;
 141         top: 22px;
 142 }
 143
 144 .engineStatus .textIndicator {
 145         position: absolute;
 146         top: 32px;
 147         right: 92px;
 148
 149         white-space: nowrap;
 150         text-align: right;
 151 }
 152
 153 .engineStatus .statusIndicator {
 154         position: absolute;
 155         top: 62px;
 156         right: 92px;
 157         white-space: nowrap;
 158         text-align: right;
 159 }
 160
 161 .leftRearPressure {
 162         position: absolute;
 163         left: 20px;
 164         top: 750px;
 165 }
 166
 167 .leftRearLine {
 168         position: absolute;
 169         left: 115px;
 170         top: 842px;
 171
 172         -webkit-transform: rotate(15deg);
 173         -moz-transform: rotate(15deg);
 174         -ms-transform: rotate(15deg);
 175         -o-transform: rotate(15deg);
 176         transform: rotate(15deg);
 177 }
 178
 179 .rightRearPressure {
 180         position: absolute;
 181         left: 510px;
 182         top: 750px;
 183 }
 184
 185 .rightRearLine {
 186         position: absolute;
 187         left: 480px;
 188         top: 842px;
 189
 190         -webkit-transform: rotate(165deg);
 191         -moz-transform: rotate(165deg);
 192         -ms-transform: rotate(165deg);
 193         -o-transform: rotate(165deg);
 194         transform: rotate(165deg);
 195 }
 196
 197 .avgEConsumption {
 198         position: absolute;
 199         left: 15px;
 200         top: 960px;
 201 }
 202
 203 .rearLDisplay {
 204         position: absolute;
 205         left: 280px;
 206         top: 960px;
 207 }
 208 .rearRDisplay {
 209         position: absolute;
 210         left: 500px;
 211         top: 960px;
 212 }
 213
 214 .batteryImage {
 215         width: 37px;
 216         height: 23px;
 217 }
 218 .batteryProgressBar{
 219         position: absolute;
 220         left: -9px;
 221         top: 205px;
 222         width: 395px;
 223         height: 50px;
 224 }
 225 .exteriorBrightnessElement{
 226         position: absolute;
 227         right: 30px;
 228         top: 150px;
 229 }
 230 .exteriorBrightnessProgressBar{
 231         position: absolute;
 232         left: -25px;
 233         top: 0;
 234         width: 280px;
 235         height: 50px;
 236 }
 237 .dayNightElement{
 238         position: absolute;
 239         top: 150px;
 240         left: 30px;
 241         width: 65px;
 242         height: 65px;
 243 }
 244 .batteryElement{
 245         position: absolute;
 246         left: 15px;
 247         top: 25px;
 248         width: 300px;
 249         height: 200px;
 250 }
 251 .batteryElement .batteryImage {
 252         position: absolute;
 253         left: 15px;
 254         top: 260px;
 255 }
 256
 257 .batteryElement .batteryStatus {
 258         position: absolute;
 259         left: 65px;
 260         top: 253px;
 261 }
 262
 263 .batteryElement .batteryRange {
 264         position: absolute;
 265         left: 150px;
 266         top: 253px;
 267 }
 268
 269 .weatherElement .weatherStatus {
 270         position: absolute;
 271         right: 30px;
 272         top: 227px;
 273 }
 274
 275 .weatherElement .weatherCity {
 276         position: absolute;
 277         right: 30px;
 278         top: 275px;
 279 }
 280
 281 .avgConsumptionElement .batteryImage {
 282         position: absolute;
 283         left: 15px;
 284         top: 990px;
 285 }
 286
 287 .avgConsumptionElement .avgConsumptionCaption {
 288         position: absolute;
 289         left: 65px;
 290         top: 990px;
 291 }
 292
 293 .avgConsumptionElement .avgConsumptionStatus {
 294         position: absolute;
 295         left: 15px;
 296         top: 1020px;
 297 }
 298
 299 .dashboardButton {
 300         width: 90px;
 301         height: 55px;
 302 }
 303
 304 .dashboardButtonOpacity {
 305         opacity: 0.5;
 306 }
 307
 308 .dashboardButton .dashboardButtonText {
 309         position: relative;
 310         text-align: center;
 311         top: -45px
 312 }
 313
 314 .rearLButton {
 315         position: absolute;
 316         left: 280px;
 317         top: 990px;
 318 }
 319
 320 .rearRButton {
 321         position: absolute;
 322         left: 500px;
 323         top: 990px;
 324 }
 325
 326 .padlocInactive {
 327         width: 45px;
 328         height: 45px;
 329 }
 330
 331 .padlocActive {
 332         width: 45px;
 333         height: 45px;
 334 }
 335
 336 .leftPadlock {
 337         position: absolute;
 338         left: 200px;
 339         top: 700px;
 340         -webkit-transition-timing-function: linear;
 341         -webkit-transition: 2s;
 342
 343         -moz-transition-timing-function: linear;
 344         -moz-transition: 2s;
 345
 346         -ms-transition-timing-function: linear;
 347         -ms-transition: 2s;
 348
 349         -o-transition-timing-function: linear;
 350         -o-transition: 2s
 351 }
 352
 353 .rightPadlock {
 354         position: absolute;
 355         left: 480px;
 356         top: 700px;
 357         -webkit-transition-timing-function: linear;
 358         -webkit-transition: 2s;
 359
 360         -moz-transition-timing-function: linear;
 361         -moz-transition: 2s;
 362
 363         -ms-transition-timing-function: linear;
 364         -ms-transition: 2s;
 365
 366         -o-transition-timing-function: linear;
 367         -o-transition: 2s;
 368 }
 369
 370 .childLock {
 371         position: absolute;
 372         left: 45px;
 373         top: 625px;
 374         width: 150px;
 375         height: 70px;
 376 }
 377
 378 .childLockText {
 379         position: absolute;
 380         left: 0;
 381         top: 10px;
 382         width: 150px;
 383         height: 80px;
 384         text-align: center;
 385         -webkit-transition-timing-function: linear;
 386         -webkit-transition: 1s;
 387
 388         -moz-transition-timing-function: linear;
 389         -moz-transition: 1s;
 390
 391         -ms-transition-timing-function: linear;
 392         -ms-transition: 1s;
 393
 394         -o-transition-timing-function: linear;
 395         -o-transition: 1s;
 396 }
 397
 398 .dashboardLineShort {
 399         width: 95px;
 400         height: 11px;
 401 }
 402
 403 .childLockLine {
 404         position: absolute;
 405         left: 75px;
 406         top: 80px;
 407
 408         -webkit-transform: rotate(15deg);
 409         -moz-transform: rotate(15deg);
 410         -ms-transform: rotate(15deg);
 411         -o-transform: rotate(15deg);
 412         transform: rotate(15deg);
 413 }
 414
 415 .dashboardCircle {
 416         width: 110px;
 417         height: 110px;
 418 }
 419
 420 .frontLightsButton {
 421         position: absolute;
 422         left: 254px;
 423         top: 313px;
 424         opacity: 0.0;
 425         width: 110px;
 426         height: 110px;
 427         -webkit-transition-timing-function: linear;
 428         -webkit-transition: 1s;
 429
 430         -moz-transition-timing-function: linear;
 431         -moz-transition: 1s;
 432
 433         -ms-transition-timing-function: linear;
 434         -ms-transition: 1s;
 435
 436         -o-transition-timing-function: linear;
 437         -o-transition: 1s;
 438 }
 439
 440 .rearLightsButton {
 441         position: absolute;
 442         left: 230px;
 443         top: 880px;
 444         opacity: 0.0;
 445         width: 110px;
 446         height: 110px;
 447         -webkit-transition-timing-function: linear;
 448         -webkit-transition: 1s;
 449
 450         -moz-transition-timing-function: linear;
 451         -moz-transition: 1s;
 452
 453         -ms-transition-timing-function: linear;
 454         -ms-transition: 1s;
 455
 456         -o-transition-timing-function: linear;
 457         -o-transition: 1s;
 458 }
 459 .dashboardFrontLightsActive {
 460         position: absolute;
 461         left: 0;
 462         top: 0;
 463         width: 720px;
 464         height: 1280px;
 465         -webkit-transition-timing-function: linear;
 466         -webkit-transition: 1s;
 467
 468         -moz-transition-timing-function: linear;
 469         -moz-transition: 1s;
 470
 471         -ms-transition-timing-function: linear;
 472         -ms-transition: 1s;
 473
 474         -o-transition-timing-function: linear;
 475         -o-transition: 1s;
 476
 477 }
 478 .dashboardRearLightsActive {
 479         position: absolute;
 480         left: 0;
 481         top: 0;
 482         width: 720px;
 483         height: 1280px;
 484         -webkit-transition-timing-function: linear;
 485         -webkit-transition: 1s;
 486
 487         -moz-transition-timing-function: linear;
 488         -moz-transition: 1s;
 489
 490         -ms-transition-timing-function: linear;
 491         -ms-transition: 1s;
 492
 493         -o-transition-timing-function: linear;
 494         -o-transition: 1s;
 495
 496         }
 497 .dashboardBreakLightsActive {
 498         position: absolute;
 499         left: 0;
 500         top: 0;
 501         width: 720px;
 502         height: 1280px;
 503         -webkit-transition-timing-function: linear;
 504         -webkit-transition: 1s;
 505
 506         -moz-transition-timing-function: linear;
 507         -moz-transition: 1s;
 508
 509         -ms-transition-timing-function: linear;
 510         -ms-transition: 1s;
 511
 512         -o-transition-timing-function: linear;
 513         -o-transition: 1s;
 514
 515         }
 516 .rearLightsImage {
 517         opacity: 0;
 518 }
 519
 520 .frontLightsImage {
 521         opacity: 0;
 522 }
 523 .dashBoardWeatherSun{
 524         width: 110px;
 525         height: 110px;
 526 }
 527 .dashBoardWeatherCloudy{
 528         width: 110px;
 529         height: 110px;
 530 }
 531 .dashBoardWeatherThunder{
 532         width: 110px;
 533         height: 110px;
 534 }
 535 .dashBoardWeatherIcon{
 536         position: absolute;
 537         left: 425px;
 538         top: 165px;
 539 }
 540 .dayNight{
 541         width:100%;
 542         height: 100%;
 543         -webkit-transition-timing-function: linear;
 544         -webkit-transition: 1s;
 545
 546         -moz-transition-timing-function: linear;
 547         -moz-transition: 1s;
 548
 549         -ms-transition-timing-function: linear;
 550         -ms-transition: 1s;
 551
 552         -o-transition-timing-function: linear;
 553         -o-transition: 1s
 554 }
 555