web-ui-fw/0.0.2/0.0.2_Common/original/css/user/green/hvac.css

   1 html {
   2
   3         font-family:Sans-Serif;
   4         -webkit-touch-callout: none;
   5         -webkit-user-select: none;
   6         -khtml-user-select: none;
   7         -moz-user-select: none;
   8         -ms-user-select: none;
   9         user-select: none;
  10
  11 }
  12
  13 body{
  14         width:720px;/*720/1080*/
  15         height:1000px;/*/1000/1500*/
  16         margin:0;
  17         font-size:.775em;/*.775em/1.1625em*/
  18 }
  19 .wrapper{
  20         width:100%;
  21         height:100%;
  22         margin:0;
  23         position:relative;
  24
  25         background: rgb(0,0,0); /* Old browsers */
  26 /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  27 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDE3MjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  28 background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(4,23,36,1) 100%); /* FF3.6+ */
  29 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(4,23,36,1))); /* Chrome,Safari4+ */
  30 background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(4,23,36,1) 100%); /* Chrome10+,Safari5.1+ */
  31 background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(4,23,36,1) 100%); /* Opera 11.10+ */
  32 background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(4,23,36,1) 100%); /* IE10+ */
  33 background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(4,23,36,1) 100%); /* W3C */
  34 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#041724',GradientType=0 ); /* IE6-8 */
  35
  36 }
  37 .static_parts_bg{
  38         background:url("images/hvac/static_parts_bg.svg") no-repeat;
  39         height:60.1%;/*601/1000*/
  40         width:100%;/*720/720*/
  41         position:absolute;
  42         top:18%;
  43         /*left:9.861111%;((720-578)/2)/720*/
  44         background-size:100%;
  45 }
  46 /*********HAZARD BUTTON************/
  47 .hazard_btn{
  48         width:57.777778%;/*416/720*/
  49         height:8.1%;/*81/1000*/
  50         background:url("images/hvac/hazard_off.svg") no-repeat;
  51         top:115px;
  52         left:21.1111%; /*152/720*/
  53         position:absolute;
  54         background-size:100%;
  55 }
  56 .hazard_btn.on{
  57         background:url("images/hvac/hazard_on.svg") no-repeat;
  58 }
  59
  60 .hazard_btn.blink{
  61         background:url("images/hvac/hazard_blink.svg") no-repeat;
  62 }
  63
  64 /*********LEFT HEAT SEAT BUTTON************/
  65 .left_seat_btn{
  66         width:22.08333333%;/*159/720*/
  67         height:12.9%;/*129/1000*/
  68         position:absolute;
  69         left:21.1111%; /*152/720*/
  70         top:22%;
  71 }
  72
  73 .left_heat_seat_off{
  74         background:url("images/hvac/left_heat_seat_off.svg") no-repeat;
  75         background-size:100%;
  76         z-index:4;
  77         width:100%;
  78         height:100%;
  79         position:absolute;
  80 }
  81
  82 .left_heat_seat_on{
  83         margin: 0 0 36px 0;
  84         background:url("images/hvac/left_heat_seat_on.svg") no-repeat bottom;
  85         z-index:4;
  86         width:100%;
  87         position:absolute;
  88         bottom:0;
  89         background-size:100%;
  90 }
  91 .left_heat_seat_on.stage1{
  92         height:0;
  93 }
  94 .left_heat_seat_on.stage2{
  95         height:34%;
  96 }
  97 .left_heat_seat_on.stage3{
  98         height:50%;
  99 }
 100 .left_heat_seat_on.stage4{
 101         height:100%;
 102 }
 103
 104 /*********RIGHT HEAT SEAT BUTTON************/
 105 .right_seat_btn{
 106         width:22.08333333%;/*159/720*/
 107         height:12.9%;/*129/1000*/
 108         position:absolute;
 109         right:21.1111%; /*152/720*/
 110         top:22%;
 111 }
 112
 113 .right_heat_seat_off{
 114         background:url("images/hvac/right_heat_seat_off.svg") no-repeat;
 115         z-index:4;
 116         width:100%;
 117         height:100%;
 118         position:absolute;
 119         background-size:100%;
 120 }
 121
 122 .right_heat_seat_on{
 123         margin: 0 0 36px 0;
 124         background:url("images/hvac/right_heat_seat_on.svg") no-repeat bottom;
 125         z-index:4;
 126         width:100%;
 127         position:absolute;
 128         bottom:0;
 129         background-size:100%;
 130 }
 131
 132 .right_heat_seat_on.stage1{
 133         height:0;
 134 }
 135 .right_heat_seat_on.stage2{
 136         height:34%;
 137 }
 138 .right_heat_seat_on.stage3{
 139         height:50%;
 140 }
 141 .right_heat_seat_on.stage4{
 142         height:100%;
 143 }
 144
 145 /*********LEFT NUM SLIDER************/
 146
 147 .left_num_bg{
 148         background:url("images/hvac/left_number_bg.svg") no-repeat;
 149         width:21.9444444%;/*158/720*/
 150         height: 18.1%;
 151         position:absolute;
 152         left:21.1111%; /*152/720*/
 153         top:35%;
 154         overflow:hidden;
 155         z-index:4;
 156         background-size:100%;
 157 }
 158
 159 .left_num_cover{
 160         background:url("images/hvac/left_number_cover.svg") no-repeat;
 161         width:21.9444444%;/*158/720*/
 162         height:23.1%;/*231/1000*/
 163         position:absolute;
 164         left:21.1111%; /*152/720*/
 165         top:35%;
 166         z-index:5;
 167     pointer-events:none;
 168         background-size:100%;
 169 }
 170
 171 .scrollable.left{
 172         height: 100%;
 173         position:absolute;
 174         width:100%;
 175         top:25%;
 176 }
 177
 178 .scrollable.left ul{
 179         list-style-type:none;
 180         font-size:7em;
 181         padding:0;
 182         margin:0;
 183         position: relative; /* Enables positionning of elements inside viewport */
 184         height:100%;
 185 }
 186
 187 .scrollable.left li{
 188         width:100%;
 189         margin:0;
 190         padding:0;
 191         color:#fff;
 192         line-height:130%;
 193         text-align:left;
 194         padding-left:5%;
 195         position:relative;
 196 }
 197 /*********RIGHT NUM SLIDER************/
 198
 199 .right_num_bg{
 200         background:url("images/hvac/right_number_bg.svg") no-repeat;
 201         width:21.9444444%;/*158/720*/
 202         height: 18.1%;
 203         position:absolute;
 204         right:21.1111%; /*152/720*/
 205         top:35%;
 206         overflow:hidden;
 207         z-index:4;
 208         background-size:100%;
 209 }
 210
 211 .right_num_cover{
 212         background:url("images/hvac/right_number_cover.svg") no-repeat;
 213         width:21.9444444%;/*158/720*/
 214         height:23.1%;/*231/1000*/
 215         position:absolute;
 216         right:21.1111%; /*152/720*/
 217         top:35%;
 218         z-index:5;
 219     pointer-events:none;
 220         background-size:100%;
 221 }
 222
 223 .scrollable.right{
 224         height: 100%;
 225         position:absolute;
 226         width:100%;
 227         top:25%;
 228 }
 229
 230 .scrollable.right ul{
 231         list-style-type:none;
 232         font-size:7em;
 233         padding:0;
 234         margin:0;
 235         position: relative; /* Enables positionning of elements inside viewport */
 236         height:100%;
 237 }
 238
 239 .scrollable.right li{
 240         width:100%;
 241         margin:0;
 242         padding:0;
 243         color:#fff;
 244         line-height:130%;
 245         text-align:left;
 246         padding-left:16%;
 247         position:relative;
 248 }
 249
 250 /*************lower half******************/
 251 .fanSpeedOn{
 252         width:0;/*42.083333%; 303/720*/
 253         height:9.4%; /*94/1000*/
 254         background:url("images/hvac/fan_bar_on.svg") no-repeat;
 255         position:absolute;
 256         left:33.3%;
 257         top:57.7%;
 258         z-index:0;
 259 }
 260
 261
 262 /********FAN DIRECTION***********/
 263 .fan_dir_down_btn{
 264         background:url("images/hvac/fan_dir_down_off.svg") no-repeat;
 265         width:17.08333333%;/*123/720*/
 266         height:9.7%;/*97/1000*/
 267         top:58.75%;/*20/1000*/
 268         left:3.333333%; /*24/720*/
 269         position:absolute;
 270         background-size:100%;
 271 }
 272 .fan_dir_down_btn.on{
 273         background:url("images/hvac/fan_dir_down_on.svg") no-repeat;
 274 }
 275 .fan_dir_right_btn{
 276         background:url("images/hvac/fan_dir_right_off.svg") no-repeat;
 277         width:17.08333333%;/*123/720*/
 278         height:9.7%;/*97/1000*/
 279         top:67.75%;/*20/1000*/
 280         left:3.333333%; /*24/720*/
 281         position:absolute;
 282         background-size:100%;
 283 }
 284
 285 .fan_dir_right_btn.on{
 286         background:url("images/hvac/fan_dir_right_on.svg") no-repeat;
 287 }
 288
 289 .fan_dir_up_btn{
 290         background:url("images/hvac/fan_dir_up_off.svg") no-repeat;
 291         width:17.08333333%;/*123/720*/
 292         height:8.8%;/*88/1000*/
 293         top:76.1%;/*20/1000*/
 294         left:3.333333%; /*24/720*/
 295         position:absolute;
 296         background-size:100%;
 297 }
 298 .fan_dir_up_btn.on{
 299         background:url("images/hvac/fan_dir_up_on.svg") no-repeat;
 300 }
 301
 302
 303
 304 .fan_control_ac{
 305         background:url("images/hvac/fan_control_ac_off.svg") no-repeat;
 306         width:15.555556%;/*112/720*/
 307         height:8.8%;/*88/1000*/
 308         top:67.75%;
 309         left:24.333%; /*24/720*/
 310         position:absolute;
 311         background-size:100%;
 312 }
 313 .fan_control_ac.on{
 314         background:url("images/hvac/fan_control_ac_on.svg") no-repeat;
 315 }
 316
 317 .fan_control_auto{
 318         background:url("images/hvac/fan_control_auto_off.svg") no-repeat;
 319         width:15.416667%;/*111/720*/
 320         height:8.8%;/*88/1000*/
 321         top:67.75%;
 322         left:42.333%; /*24/720*/
 323         position:absolute;
 324         background-size:100%;
 325 }
 326 .fan_control_auto.on{
 327         background:url("images/hvac/fan_control_auto_on.svg") no-repeat;
 328 }
 329
 330 .fan_control_circ{
 331         background:url("images/hvac/fan_control_circ_off.svg") no-repeat;
 332         width:15.555556%;/*112/720*/
 333         height:8.8%;/*88/1000*/
 334         top:67.75%;
 335         left:60.333%; /*24/720*/
 336         position:absolute;
 337         background-size:100%;
 338 }
 339 .fan_control_circ.on{
 340         background:url("images/hvac/fan_control_circ_on.svg") no-repeat;
 341 }
 342
 343 /***DEFROST****/
 344
 345 .defrost_max_btn{
 346         background:url("images/hvac/defrost_max_off.svg") no-repeat;
 347         width:17.08333333%;/*123/720*/
 348         height:9.7%;/*97/1000*/
 349         top:58.75%;/*20/1000*/
 350         right:3.333333%; /*24/720*/
 351         position:absolute;
 352         background-size:100%;
 353 }
 354 .defrost_max_btn.on{
 355         background:url("images/hvac/defrost_max_on.svg") no-repeat;
 356 }
 357 .defrost_rear_btn{
 358         background:url("images/hvac/defrost_rear_off.svg") no-repeat;
 359         width:17.08333333%;/*123/720*/
 360         height:9.7%;/*97/1000*/
 361         top:67.75%;/*20/1000*/
 362         right:3.333333%; /*24/720*/
 363         position:absolute;
 364         background-size:100%;
 365 }
 366
 367 .defrost_rear_btn.on{
 368         background:url("images/hvac/defrost_rear_on.svg") no-repeat;
 369 }
 370
 371 .defrost_front_btn{
 372         background:url("images/hvac/defrost_front_off.svg") no-repeat;
 373         width:17.08333333%;/*123/720*/
 374         height:8.8%;/*88/1000*/
 375         top:76.1%;/*20/1000*/
 376         right:3.333333%; /*24/720*/
 377         position:absolute;
 378         background-size:100%;
 379 }
 380 .defrost_front_btn.on{
 381         background:url("images/hvac/defrost_front_on.svg") no-repeat;
 382 }