css/sdl.css

   1 /**
   2  * CSS for sdl aplications
   3  */
   4
   5 .ffw_list_menu {
   6         left: 440px;
   7         width: 158px;
   8         border: 1px solid #393939;
   9         overflow: hidden;
  10 }
  11
  12 .ffw_list_menu .control {
  13         z-index: 2000;
  14         text-align: center;
  15 }
  16
  17 .ffw_list_menu .ffw-button {
  18         position: relative;
  19         height: 49px;
  20         border-bottom: 1px solid #393939;
  21         line-height: 50px;
  22 }
  23
  24 .ffw_list_menu .ffw-button span {
  25         margin-left: 20px;
  26 }
  27
  28 .ffw_list_menu .content {
  29         position: relative;
  30 }
  31
  32 .ffw_list_menu .ffw-button.hidden {
  33         display: none;
  34 }
  35
  36 .sdl-window {
  37         width: 800px;
  38         height: 480px;
  39         background-color: #000;
  40         z-index: 1;
  41 }
  42
  43 .sdl-window .back-button {
  44         top: 80px;
  45         left: 5px;
  46         width: 48px;
  47         height: 48px;
  48         border: 1px solid #333;
  49         border-radius: 2px;
  50 }
  51
  52 .sdl-window .back-button .ico {
  53         margin-top: 13px;
  54         margin-left: 8px;
  55 }
  56
  57 .sdl-window .caption-text {
  58         top: 80px;
  59         left: 75px;
  60         width: 620px;
  61         height: 20px;
  62         background: #393939;
  63         padding: 15px;
  64 }
  65
  66 #info_nonMedia {
  67         z-index: 1001;
  68 }
  69
  70 #info_nonMedia .backButton {
  71         top: 80px;
  72         left: 20px;
  73 }
  74
  75 #info_nonMedia .inner_content {
  76         left: 180px;
  77         top: 90px;
  78         width: 600px;
  79         height: 300px;
  80 }
  81
  82 #info_nonMedia .app_title {
  83         width: 390px;
  84         padding: 15px;
  85         top: 1px;
  86         background-color: #393939;
  87 }
  88
  89 #info_nonMedia .app_image {
  90         top: 60px;
  91 }
  92
  93 #info_nonMedia .app_fields {
  94         left: 160px;
  95         top: 60px;
  96         width: 260px;
  97 }
  98
  99 #info_nonMedia .app_fields .label {
 100         position: relative;
 101         border: 1px solid #393939;
 102         padding: 7px;
 103         margin-bottom: 5px;
 104 }
 105
 106 #info_nonMedia .presets {
 107     top: 220px;
 108     width: 420px;
 109     height: 80px;
 110 }
 111
 112 #info_nonMedia .presets .ffw-button {
 113     width: 138px;
 114     height: 38px;
 115     position: relative;
 116     float: left;
 117     line-height: 40px;
 118     border-bottom: 1px solid #393939;
 119     border-right: 1px solid #393939;
 120     border-top: 1px solid #222;
 121     border-left: 1px solid #222;
 122     text-align: center;
 123 }
 124
 125 #info_nonMedia .app_image img{
 126         border: 1px solid #393939;
 127 }
 128
 129 #sdl_options .list{
 130         width: 650px;
 131         height: 251px;
 132         border-radius: 2px;
 133         left: 75px;
 134         top: 150px;
 135 }
 136
 137 /*#sdl_view_container .list-content,*/
 138 #sdl_options .list-content{
 139         width: 590px;
 140 }
 141 #info_apps_deviceList_list .list-content span,
 142 #sdl_view_container .list-content span,
 143 #sdl_options .list-content span{
 144         margin-left: 15px;
 145 }
 146
 147 #sdl_options .list-content .ico {
 148     height: 49px;
 149     float: left;
 150 }
 151
 152 #info_nonMedia_options_submenu {
 153         z-index: 11000;
 154         width: 800px;
 155         height: 480px;
 156         background-color: black;
 157         top: 0px;
 158         left: 0px;
 159 }
 160
 161 #sdl_media_presetButtons .preset-item > span {
 162         z-index: 202;
 163         display: block;
 164         position: absolute;
 165         left: 10px;
 166         width: 140px;
 167         height: 50px;
 168         font-size: 20px;
 169         line-height: 50px;
 170         overflow: hidden;
 171         text-overflow: ellipsis;
 172         color: white;
 173 }
 174
 175 #sdl_view_container .preset-items{
 176         width: 468px;
 177 }
 178
 179 #sdl_view_container .main-preset-buttons-wraper .preset-item.a3,
 180 #sdl_view_container .main-preset-buttons-wraper .preset-item.a6{
 181         width: 155px;
 182 }
 183
 184 #sdl_view_container .player_controllsV2{
 185         top: 241px !important;
 186         height: 48px;
 187 }
 188
 189 #sdl_view_container .player_controllsV2 .ffw-button{
 190         height: 48px;
 191 }
 192
 193 #sdl_view_container .player_controllsV2 img{
 194         margin-top: -26px;
 195 }
 196
 197
 198 /* ScrollableMessage */
 199 #ScrollableMessage.ScrollableMessage{
 200         left: 0;
 201         top: 0;
 202         width:  800px;
 203         height: 480px;
 204         /*z-index: 1000;*/
 205         background: url(../images/media/bg.png) no-repeat;
 206 }
 207
 208 #ScrollableMessage.active{
 209         opacity: 1;
 210         display: block;
 211 }
 212
 213 #ScrollableMessage .backButton {
 214         top: 80px;
 215         width: 48px;
 216         height: 48px;
 217         border: 1px solid #333;
 218         border-radius: 2px;
 219 }
 220
 221 #ScrollableMessage .titleText{
 222         top: 80px;
 223         left: 75px;
 224         width: 620px;
 225         height: 20px;
 226         background: #393939;
 227         padding: 15px;
 228 }
 229
 230 #ScrollableMessage .scrollableText{
 231         position: absolute;
 232         width: 525px;
 233         height: 251px;
 234         border-radius: 2px;
 235         left: 200px;
 236         top: 154px;
 237         overflow: hidden;
 238 }
 239
 240 #ScrollableMessage .scrollableText-content{
 241         border: none;
 242         width: 474px;
 243 }
 244
 245 #ScrollableMessage .scrollableText-item {
 246         position: relative;
 247         width: 100%;
 248         height: 48px;
 249         font-size: 20px;
 250         line-height: 50px;
 251         border: 1px solid #393939;
 252 }
 253
 254 #ScrollableMessage .ffw_list_menu {
 255         top: 154px !important;
 256         left: 25px !important;
 257 }
 258
 259 #ScrollableMessage .scrollableTextArea{
 260         margin: 0px;
 261         /*height: 251px;*/
 262         width: 469px;
 263         font-family: sans-serif;
 264         font-size: 16px;
 265         color: white;
 266         background-color: transparent;
 267         resize: none;
 268         line-height: 23px;
 269         position: absolute;
 270 }
 271
 272
 273 /* SDL Slider */
 274
 275 .slider-header {
 276         top: 167px;
 277         left: 145px;
 278         width: 480px;
 279         height: 20px;
 280         background: #393939;
 281         padding: 15px;
 282 }
 283
 284 .slider-footer {
 285         top: 325px;
 286         left: 145px;
 287         width: 480px;
 288         height: 20px;
 289         background: #393939;
 290         padding: 15px;
 291 }
 292
 293 #slider_view .sliderControl {
 294         width: 600px;
 295         left: 100px;
 296         top: 250px;
 297         text-align: center;
 298 }
 299
 300 #slider_view .control {
 301         width: 58px;
 302         height: 38px;
 303         border: 1px solid #393939;
 304         position: relative;
 305         display: inline-block;
 306 }
 307
 308
 309 #slider_view .ledContainer{
 310         position: relative;
 311         display: inline-block;
 312         border: 1px solid #393939;
 313         height: 38px;
 314 }
 315
 316
 317  #slider_view .control.minus .ico {
 318          top: 19px;
 319          left: 20px;
 320          position: absolute;
 321  }
 322  #slider_view .control.plus .ico {
 323          top: 12px;
 324          left: 20px;
 325          position: absolute;
 326  }
 327
 328 #slider_view .led {
 329         width: 12px;
 330         height: 40px;
 331         background: url("../images/common/seat-act-led.png") no-repeat;
 332         position: relative !important;
 333         background-position: -4px 0;
 334         display: inline-block;
 335 }
 336 #slider_view .led-inactive {
 337         background: url("../images/common/seat-inact-led.png") no-repeat;
 338         background-position: 3px 8px;
 339         width: 12px;
 340         height: 40px;
 341         position: relative !important;
 342         display: inline-block;
 343 }
 344
 345
 346 /*      SDL Perform Interaction Choise,
 347         SDL TBT Turn List */
 348 #tbtTurnListView .list,
 349 #perform_interaction_view .list{
 350         position: absolute;
 351         width: 650px;
 352         height: 251px;
 353         border-radius: 2px;
 354         left: 75px;
 355         top: 154px;
 356 }
 357 #tbtTurnListView .list span,
 358 #perform_interaction_view .list span{
 359         margin-left: 15px;
 360 }
 361 #tbtTurnListView .list-content,
 362 #perform_interaction_view .list-content{
 363         width: 578px;
 364 }
 365 #sdl_view_container .cd_logo{
 366         position: absolute;
 367         top: 90px;
 368         right: 10px;
 369         border: 1px solid #393939;
 370         -webkit-border-radius: 2px;
 371         width: 109px;
 372         height: 109px;
 373 }
 374 #sdl_view_container .cd_logoV2{
 375         position: absolute;
 376         top: 70px;
 377         right: 10px;
 378         border: 1px solid #393939;
 379         -webkit-border-radius: 2px;
 380         width: 109px;
 381         height: 109px;
 382 }
 383 #sdl_view_container .timeV2{
 384         top: 155px;
 385 }
 386 #sdl_view_container .textLimit{
 387         width: 460px;
 388         text-overflow: ellipsis;
 389         overflow: hidden;
 390 }
 391 #VRButton.VRButton{
 392         background: url(../images/home/controlButtons/vr.png) no-repeat;
 393         width: 89px;
 394         height: 90px;
 395         left: 1024px;;
 396         top: 2px;
 397         -webkit-transition: 0.2s;
 398 }
 399 #VRButton.pressed{
 400         background: url(../images/home/controlButtons/vr_pressed.png) no-repeat;
 401 }
 402 #vehicleInfoButton.vehicleInfoButton{
 403         width: 117px;
 404         height: 48px;
 405         left: 1059px;
 406         top: 206px;
 407         text-align: center;
 408         line-height: 48px;
 409 }
 410 #tbtClientStateButton.tbtClientStateButton{
 411         width: 158px;
 412         height: 48px;
 413         left: 1018px;
 414         top: 418px;
 415         text-align: center;
 416         line-height: 48px;
 417 }
 418 #tbtClientStateView,
 419 #VehicleInfo{
 420         opacity: 0;
 421         left: 50px;
 422         width: 700px;
 423         height: 340px;
 424         background-color: black;
 425         z-index: 2;
 426         border-radius: 10PX;
 427         top: 70px;
 428         -webkit-transition: opacity 1s ease-in-out;
 429         display: none;
 430         border: 1px solid white;
 431 }
 432 #tbtClientStateView .tbtClientStateLabel,
 433 #VehicleInfo .vehicleInfoLabel{
 434         top: 10px;
 435         width: 600px;
 436         left: 35px;
 437         height: 20px;
 438         padding: 15px;
 439         background: #393939;
 440 }
 441 #tbtClientStateView.active,
 442 #VehicleInfo.active{
 443         opacity: 1;
 444         display: block;
 445 }
 446 #tbtClientStateView .tbtClientState,
 447 #VehicleInfo .prndl{
 448         top: 70px;
 449         width: 600px;
 450         left: 40px;
 451         height: 20px;
 452         padding: 10px;
 453         background: #535353;
 454 }
 455 #tbtClientStateView .tbtClientStateSelect,
 456 #VehicleInfo .prndlSelect{
 457         top: 125px;
 458         position: absolute;
 459         width: 150px;
 460         left: 275px;
 461         height: 40px;
 462         color: white;
 463         background: #393939;
 464 }
 465 #tbtClientStateView .tbtClientStateSelect option,
 466 #VehicleInfo .prndlSelect option{
 467         background: #393939;
 468 }
 469 #VehicleInfo .ecu1Title{
 470         top: 180px;
 471         width: 600px;
 472         left: 40px;
 473         height: 20px;
 474         padding: 10px;
 475         background: #535353;
 476 }
 477 #VehicleInfo .ecu1{
 478         top: 233px;
 479         width: 80px;
 480         left: 65px;
 481         height: 20px;
 482         padding: 10px;
 483 }
 484 #VehicleInfo .ecu2{
 485         top: 265px;
 486         width: 80px;
 487         left: 65px;
 488         height: 20px;
 489         padding: 10px;
 490 }
 491 #VehicleInfo .ecu1Data{
 492         top: 233px;
 493         width: 485px;
 494         left: 155px;
 495         height: 20px;
 496         padding: 10px;
 497 }
 498 #VehicleInfo .ecu2Data{
 499         top: 265px;
 500         width: 485px;
 501         left: 155px;
 502         height: 20px;
 503         padding: 10px;
 504 }
 505
 506 /* Alert, AudioPassThruPopUp popup*/
 507 #AlertManeuverPopUp.AlertManeuverPopUp,
 508 #AudioPassThruPopUp.AudioPassThruPopUp,
 509 #AlertPopUp.AlertPopUp{
 510         opacity: 0;
 511         left: 200px;
 512         width: 400px;
 513         height: 245px;
 514         z-index: 2;
 515         top: 110px;
 516         -webkit-transition: opacity 1s ease-in-out;
 517         background-color: black;
 518         border: #A6A6A6 solid 2px;
 519         border-radius: 6px;
 520         display: none;
 521 }
 522 #AlertManeuverPopUp .applicationName,
 523 #AudioPassThruPopUp .applicationName,
 524 #AlertPopUp .applicationName{
 525         width: 380px;
 526         left: 10px;
 527         text-align: center;
 528         font-size: 25px;
 529         line-height: 30px;
 530         overflow: hidden;
 531         text-overflow: ellipsis;
 532 }
 533 #AlertPopUp .alertPopUpImage{
 534         width: 83px;
 535         height: 74px;
 536         background: url(../images/sdl/Warning.png) no-repeat;
 537         top: 45px;
 538         left: 10px;
 539 }
 540 #AudioPassThruPopUp .audioPassThruImage{
 541         width: 83px;
 542         height: 74px;
 543         background: url(../images/home/controlButtons/vrImage.png) no-repeat;
 544         top: 45px;
 545         left: 25px;
 546 }
 547 #AudioPassThruPopUp .message1,
 548 #AlertPopUp .message1{
 549         top: 37px;
 550         left: 105px;
 551         width: 285px;
 552         height: 30px;
 553         text-align: center;
 554         font-size: 23px;
 555         line-height: 30px;
 556         overflow: hidden;
 557         text-overflow: ellipsis;
 558 }
 559 #AudioPassThruPopUp .message2,
 560 #AlertPopUp .message2{
 561         top: 70px;
 562         left: 105px;
 563         width: 285px;
 564         height: 28px;
 565         text-align: center;
 566         font-size: 23px;
 567         line-height: 30px;
 568         overflow: hidden;
 569         text-overflow: ellipsis;
 570 }
 571 #AudioPassThruPopUp .message3,
 572 #AlertPopUp .message3{
 573         top: 100px;
 574         left: 105px;
 575         width: 285px;
 576         height: 28px;
 577         text-align: center;
 578         font-size: 23px;
 579         line-height: 30px;
 580         overflow: hidden;
 581         text-overflow: ellipsis;
 582 }
 583 #AlertManeuverPopUp.AlertManeuverActive,
 584 #AudioPassThruPopUp.AudioPassThruActive,
 585 #AlertPopUp.AlertActive{
 586         opacity: 1;
 587         display: block;
 588 }
 589 #AlertManeuverPopUp .softButton,
 590 #AudioPassThruPopUp .softButton,
 591 #AlertPopUp .softButton{
 592         border: 1px solid #393939;
 593         border-radius: 3px;
 594         height: 42px;
 595         line-height: 42px;
 596         text-align: center;
 597         float: left;
 598         margin: 10px;
 599         position: relative;
 600 }
 601 #AlertManeuverPopUp .closeButton{
 602         width: 170px;
 603         top: 180px;
 604         left: 110px;
 605 }
 606 #AlertPopUp .alertSoftButtons{
 607         margin-left: 8px;
 608         top: 120px;
 609         width: 386px;
 610 }
 611 #AlertManeuverPopUp .one,
 612 #softButton0.one{
 613         margin-top: 42px;
 614         width: 362px;
 615 }
 616 #softButton0.two{
 617         margin-top: 42px;
 618         width: 170px;
 619 }
 620 #softButton1.two{
 621         margin-top: 42px;
 622         width: 170px;
 623 }
 624 #softButton0.three{
 625         width: 170px;
 626 }
 627 #AudioPassThruPopUp .buttonDone,
 628 #softButton1.three{
 629         width: 170px;
 630 }
 631 #AudioPassThruPopUp .buttonCancel,
 632 #softButton2.three{
 633         width: 362px;
 634 }
 635 #softButton0.four{
 636         width: 170px;
 637 }
 638 #softButton1.four{
 639         width: 170px;
 640 }
 641 #softButton2.four{
 642         width: 170px;
 643 }
 644 #softButton3.four{
 645         width: 170px;
 646 }
 647 #AudioPassThruPopUp .buttonRetry{
 648         top: 120px;
 649         width: 175px;
 650 }
 651 #AudioPassThruPopUp .buttonDone{
 652         top: 120px;
 653         width: 175px;
 654 }
 655 #AudioPassThruPopUp .buttonCancel{
 656         top: 120px;
 657         width: 372px;
 658 }
 659 #info_leftMenu_sdl{
 660         font-size: 18px;
 661         line-height: 48px;
 662 }
 663 #info_leftMenu_sdl img{
 664         float: left;
 665 }
 666 #info_leftMenu_sdl span{
 667         float: left;
 668         position: relative;
 669         width: 100px;
 670         text-overflow: ellipsis;
 671         overflow: hidden;
 672         left: 0;
 673 }
 674
 675 /* TurnByTurnView */
 676 #TurnByTurnView.TurnByTurnView{
 677         top: 48px;
 678         height: 384px;
 679         left: 153px;
 680         width: 647px;
 681 }
 682 #TurnByTurnView .caption-text{
 683         left: 5px;
 684         width: 607px;
 685         top: 15px;
 686 }
 687 #TurnByTurnView .totalDistanceLabel{
 688         height: 20px;
 689         background: #393939;
 690         padding: 15px;
 691         left: 5px;
 692         top: 80px;
 693         width: 170px;
 694 }
 695 #TurnByTurnView .etaLabel{
 696         height: 20px;
 697         background: #393939;
 698         padding: 15px;
 699         left: 206px;
 700         top: 80px;
 701         width: 170px;
 702 }
 703 #TurnByTurnView .turnList{
 704         left: 5px;
 705         top: 145px;
 706         width: 379px;
 707         padding: 10px;
 708         text-align: center;
 709 }
 710 #TurnByTurnView .ffw_list_menu{
 711         height: 198px;
 712         top: 200px;
 713         left: 5px;
 714         width: 401px;
 715         border: none;
 716 }
 717 #TurnByTurnView .ffw-button{
 718         border-radius: 3px;
 719         border: 1px solid #393939;
 720         margin-bottom: 5px;
 721         text-align: center;
 722         font-size: 20px;
 723 }
 724 #turnList img{
 725     margin-top: -10px;
 726 }
 727 #TurnByTurnView .homeScreen{
 728         left: 440px;
 729         top: 312px;
 730         padding: 0 0 0 5px;
 731         width: 195px;
 732 }
 733 #TurnByTurnView .homeScreen > img{
 734         float: left;
 735         width: 50px;
 736         height: 50px;
 737 }
 738 #TurnByTurnView .homeScreen > span{
 739         float: left;
 740         line-height: 50px;
 741         padding-left: 5px;
 742 }
 743 #TurnByTurnView .navigationText2{
 744         left: 440px;
 745         top: 269px;
 746         width: 182px;
 747         padding: 10px;
 748         height: 20px;
 749         background: #393939;
 750 }
 751 #TurnByTurnView .turnIcon{
 752         border: 1px solid #222;
 753         top: 64px;
 754         left: 440px;
 755         width: 200px;
 756         height: 200px;
 757         background-size: contain;
 758         background-repeat: no-repeat;
 759 }
 760
 761 #tbtTurnListList .list-content .label > img{
 762         width: 50px;
 763         height: 50px;
 764         float: left;
 765 }
 766 #info_apps_list .ffw-button{
 767         overflow: hidden;
 768         text-overflow: ellipsis;
 769 }
 770
 771 #sdl_view_container{
 772         z-index:501;
 773 }
 774
 775 #sdl_view_container .title{
 776         top: 79px;
 777         font-size: 38px;
 778         left: 7px;
 779         width: 340px;
 780         height: 44px;
 781 }
 782
 783 #sdl_view_container .album{
 784         top: 123px;
 785         font-size: 26px;
 786         left: 10px;
 787         width: 330px;
 788         height: 32px;
 789 }
 790
 791 #sdl_view_container .artist{
 792         top: 155px;
 793         font-size: 26px;
 794         left: 10px;
 795         width: 330px;
 796         height: 32px;
 797 }
 798
 799 #sdl_view_container .player_controlls{
 800         top: -200px;
 801         left: 135px;
 802 }
 803
 804 /* SDL Slider*/
 805 #media_sdl_slider_view{
 806         width: 800px;
 807         height: 480px;
 808         z-index: 1000;
 809         background: url(../images/media/bg.png) no-repeat;
 810 }
 811
 812 #media_sdl_slider_view .backButton {
 813         top: 80px;
 814         width: 48px;
 815         height: 48px;
 816         border: 1px solid #333;
 817         border-radius: 2px;
 818 }
 819
 820 #media_sdl_slider_view .initialText{
 821         top: 80px;
 822         left: 75px;
 823         width: 620px;
 824         height: 20px;
 825         background: #393939;
 826         padding: 15px;
 827 }
 828
 829 /* SDL Perform Interaction Choise */
 830 #media_app_perform_interaction_view{
 831         width: 800px;
 832         height: 480px;
 833         z-index: 1000;
 834         background: url(../images/media/bg.png) no-repeat;
 835 }
 836
 837 #media_app_perform_interaction_view .backButton {
 838         top: 80px;
 839         width: 48px;
 840         height: 48px;
 841         border: 1px solid #333;
 842         border-radius: 2px;
 843 }
 844
 845 #media_app_perform_interaction_view .list{
 846         position: absolute;
 847         width: 629px;
 848         height: 251px;
 849         border-radius: 2px;
 850         left: 100px;
 851         top: 154px;
 852 }
 853
 854 #media_app_perform_interaction_view .initialText{
 855         top: 80px;
 856         left: 75px;
 857         width: 620px;
 858         height: 20px;
 859         background: #393939;
 860         padding: 15px;
 861 }
 862
 863 #media_app_perform_interaction_view .list-content{
 864         width: 578px;
 865 }
 866
 867 /* SDL Media Options */
 868 #media_app_options_view{
 869         width: 800px;
 870         height: 480px;
 871         z-index: 2002;
 872         background: url(../images/media/bg.png) no-repeat;
 873 }
 874
 875 #media_app_options_view .backButton {
 876         top: 80px;
 877         width: 48px;
 878         height: 48px;
 879         border: 1px solid #333;
 880         border-radius: 2px;
 881 }
 882
 883 #media_app_options_view .list{
 884         position: absolute;
 885         width: 650px;
 886         height: 251px;
 887         border-radius: 2px;
 888         left: 75px;
 889         top: 154px;
 890 }
 891
 892 #media_app_options_view .optionsLabel{
 893         top: 80px;
 894         left: 75px;
 895         width: 620px;
 896         height: 20px;
 897         background: #393939;
 898         padding: 15px;
 899 }
 900
 901 #media_app_options_view .list-content{
 902         width: 578px;
 903 }