Chromium Code Reviews Chromium Code Reviews
Issue 9385040:
Updated home screen to match new UI mocks. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src| OLD | NEW |
|---|---|
| 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. | 3 * found in the LICENSE file. |
| 4 */ | 4 */ |
| 5 | 5 |
|
Jamie
2012/02/22 22:33:46
Most of this new CSS is unnecessary, but until the
| |
| 6 html,body,div,span,applet,object,iframe, | |
| 7 h1,h2,h3,h4,h5,h6,p,blockquote,pre, | |
| 8 a,abbr,acronym,address,big,cite,code, | |
| 9 del,dfn,em,font,img,ins,kbd,q,s,samp, | |
| 10 small,strike,strong,sub,sup,tt,var, | |
| 11 dl,dt,dd,ol,ul,li, | |
| 12 fieldset,form,label,legend, | |
| 13 table,caption,tbody,tfoot,thead,tr,th,td { | |
| 14 margin: 0; | |
| 15 padding: 0; | |
| 16 border: 0; | |
| 17 outline: 0; | |
| 18 font-weight: inherit; | |
| 19 font-style: inherit; | |
| 20 font-size: 100%; | |
| 21 font-family: inherit; | |
| 22 vertical-align: baseline; | |
| 23 } | |
| 24 body { | |
| 25 line-height: 1; | |
| 26 color: black; | |
| 27 background: white; | |
| 28 } | |
| 29 ol,ul { | |
| 30 list-style: none; | |
| 31 } | |
| 32 table { | |
| 33 border-collapse: separate; | |
| 34 border-spacing: 0; | |
| 35 } | |
| 36 caption,th,td { | |
| 37 text-align: left; | |
| 38 font-weight: normal; | |
| 39 } | |
| 40 blockquote:before,blockquote:after, | |
| 41 q:before,q:after { | |
| 42 content: ""; | |
| 43 } | |
| 44 blockquote,q { | |
| 45 quotes: "" ""; | |
| 46 } | |
| 47 input::-moz-focus-inner { | |
| 48 border: 0; | |
| 49 } | |
| 50 | |
| 51 | |
| 52 /*------------------------------------------------------------------ | |
| 53 @global Type | |
| 54 ------------------------------------------------------------------*/ | |
| 55 body,body input,body button,body td { | |
| 56 font-family: "Arial", "Helvetica", sans-serif; | |
| 57 color: #222; | |
| 58 font-size:12px; | |
| 59 -webkit-tap-highlight-color: rgba(0,0,0,0); | |
| 60 } | |
| 61 h1,h2,h3,h4,h5 { | |
| 62 font-size: 16px; | |
| 63 line-height:24px; | |
| 64 font-weight: normal; | |
| 65 color: #222; | |
| 66 } | |
| 67 p { | |
| 68 margin: 0 0 1em; | |
| 69 font-size: 13px; | |
| 70 line-height: 18px; | |
| 71 } | |
| 72 p.nonLatin { | |
| 73 font-size: 14px; | |
| 74 line-height: 21px; | |
| 75 } | |
| 76 li { | |
| 77 line-height: 17px; | |
| 78 } | |
| 79 a { | |
| 80 text-decoration: none; | |
| 81 color: #15c; | |
| 82 cursor: pointer; | |
| 83 } | |
| 84 a:visited { | |
| 85 color: #61c; | |
| 86 } | |
| 87 a:active { | |
| 88 color: #d14836; | |
| 89 } | |
| 90 a.secondary { | |
| 91 text-decoration: none; | |
| 92 color: #2D9AE3; | |
| 93 } | |
| 94 iframe { | |
| 95 border: 0px; | |
| 96 } | |
| 97 strong, b { | |
| 98 color: #000; | |
| 99 font-weight:bold; | |
| 100 } | |
| 101 em { | |
| 102 font-style: italic; | |
| 103 } | |
| 104 | |
| 105 div.mobile { | |
| 106 width:320px; | |
| 107 } | |
| 108 | |
| 109 .clearfix:after { clear: both; } | |
| 110 .clearfix { zoom: 1; } | |
| 111 | |
| 112 /*------------------------------------------------------------------ | |
| 113 Stickersheet global styles | |
| 114 ------------------------------------------------------------------*/ | |
| 115 #stickersheet #siteTitle { | |
| 116 padding: 30px 40px; | |
| 117 } | |
| 118 #stickers > ul > li { | |
| 119 padding: 30px 0; | |
| 120 border-bottom: 1px solid #DDD; | |
| 121 position: relative; | |
| 122 } | |
| 123 .componentName { | |
| 124 display: block; | |
| 125 height: 29px; | |
| 126 float: none; | |
| 127 font-size: 20px; | |
| 128 line-height: 24px; | |
| 129 color: #222; | |
| 130 margin-bottom: 21px; | |
| 131 margin-left: 0px; | |
| 132 margin-right: 0px; | |
| 133 } | |
| 134 .option { | |
| 135 float: left; | |
| 136 width: 336px; | |
| 137 margin-right: 16px; | |
| 138 } | |
| 139 .option .componentName { | |
| 140 margin-bottom: 0; | |
| 141 } | |
| 142 #stickersheet h2.componentName a { | |
| 143 color: #222; | |
| 144 } | |
| 145 #stickers > ul { | |
| 146 margin: 0 44px; | |
| 147 } | |
| 148 /* stickersheet specific positioning */ | |
| 149 .kd-modaldialog.demo, | |
| 150 .kd-settings.demo { | |
| 151 position: relative; | |
| 152 top: 0; | |
| 153 left: 0; | |
| 154 margin-left: 0; | |
| 155 -webkit-transform: scale(1.0); | |
| 156 z-index: 0; | |
| 157 } | |
| 158 #stickers #kd-tooltip { | |
| 159 top: 75px; | |
| 160 margin-left: 0; | |
| 161 } | |
| 162 #wrap { | |
| 163 overflow: auto; | |
| 164 height: 100%; | |
| 165 } | |
| 166 #stickers > ul > li ol { | |
| 167 margin: 5px 10px; | |
| 168 } | |
| 169 #stickers > ul > li ol li { | |
| 170 margin-bottom: 5px; | |
| 171 } | |
| 172 #stickers .kd-buttonbar { | |
| 173 margin-bottom: 16px; | |
| 174 } | |
| 175 #modaldemo { | |
| 176 display: none; | |
| 177 } | |
| 178 .sectionTitle { | |
| 179 float: left; | |
| 180 width: 160px; | |
| 181 margin-right: 16px; | |
| 182 clear: left; | |
| 183 margin-bottom: 16px; | |
| 184 } | |
| 185 .sectionContent { | |
| 186 float: left; | |
| 187 clear: right; | |
| 188 margin-bottom: 16px; | |
| 189 } | |
| 190 | |
| 191 /*------------------------------------------------------------------ | |
| 192 Styleguide container | |
| 193 ------------------------------------------------------------------*/ | |
| 194 .styleguide { | |
| 195 padding: 0 44px 44px; | |
| 196 } | |
| 197 .styleguide .section { | |
| 198 position:relative; | |
| 199 padding: 44px 0; | |
| 200 height: 100%; | |
| 201 overflow:visible; | |
| 202 border-bottom: 1px solid #ebebeb; | |
| 203 } | |
| 204 .styleguide .section.clearfix { | |
| 205 overflow:hidden; | |
| 206 } | |
| 207 .styleguide .section .section { | |
| 208 padding: 16px 0; | |
| 209 border-bottom: 0; | |
| 210 } | |
| 211 .styleguide .section h3 { | |
| 212 /* margin: 16px 0;*/ | |
| 213 } | |
| 214 #styleGuideNav { | |
| 215 width:156px; | |
| 216 position:fixed; | |
| 217 left:0; | |
| 218 top:28px; | |
| 219 } | |
| 220 #styleGuideNav li li a{ | |
| 221 width:144px; | |
| 222 overflow:hidden; | |
| 223 white-space:nowrap; | |
| 224 text-overflow:ellipsis; | |
| 225 } | |
| 226 #styleGuideNav li li a.selected{ | |
| 227 color:#d14836; | |
| 228 } | |
| 229 | |
| 230 /*------------------------------------------------------------------ | |
| 231 Notes And Metrics | |
| 232 ------------------------------------------------------------------*/ | |
| 233 .notesBox .kd-zippy{ | |
| 234 margin-top:-20px; | |
| 235 } | |
| 236 .notesBox .kd-zippy .row{ | |
| 237 float:right; | |
| 238 display: block; | |
| 239 clear:both; | |
| 240 } | |
| 241 .notesBox .kd-disclosureindicator { | |
| 242 position:relative; | |
| 243 top:-2px; | |
| 244 cursor:default; | |
| 245 } | |
| 246 .notesBox .kd-disclosureindicator + h3{ | |
| 247 display: inline; | |
| 248 margin-left:6px; | |
| 249 cursor:default; | |
| 250 } | |
| 251 .notesBox .kd-zippycontent{ | |
| 252 height:100%; | |
| 253 overflow:hidden; | |
| 254 margin-bottom: 20px; | |
| 255 margin-left:16px; | |
| 256 background-color: #F5F5F5; | |
| 257 clear:both; | |
| 258 } | |
| 259 .notesBox .notes{ | |
| 260 width:320px; | |
| 261 float:left; | |
| 262 padding-top:10px; | |
| 263 padding-bottom:10px; | |
| 264 padding-left:16px; | |
| 265 } | |
| 266 | |
| 267 .notesBox h3{ | |
| 268 margin-bottom:10px; | |
| 269 margin-top:10px; | |
| 270 } | |
| 271 | |
| 272 .notesBox .metrics{ | |
| 273 width:320px; | |
| 274 float:left; | |
| 275 padding-top:10px; | |
| 276 padding-bottom:10px; | |
| 277 padding-left:16px; | |
| 278 | |
| 279 } | |
| 280 | |
| 281 .notesBox ul { | |
| 282 list-style:disc outside; | |
| 283 padding: 0 16px 16px; | |
| 284 } | |
| 285 | |
| 286 .notesBox ul li { | |
| 287 margin-bottom: 5px; | |
| 288 } | |
| 289 | |
| 290 /*------------------------------------------------------------------ | |
| 291 Grid | |
| 292 ------------------------------------------------------------------*/ | |
| 293 #grid { | |
| 294 border-left: 44px solid rgba(255,255,0,0.1); | |
| 295 border-right: 44px solid rgba(255,255,0,0.1); | |
| 296 left: 0; | |
| 297 top: 0; | |
| 298 bottom: 0; | |
| 299 z-index: 100; | |
| 300 -webkit-box-sizing: content-box; | |
| 301 overflow: hidden; | |
| 302 -webkit-transition: all 0.218s; | |
| 303 } | |
| 304 html.x-expand #grid { | |
| 305 border-left: 72px solid rgba(255,255,0,0.05); | |
| 306 border-right: 72px solid rgba(255,255,0,0.05); | |
| 307 } | |
| 308 .gridline { | |
| 309 width: 72px; | |
| 310 height: 117px; | |
| 311 background-color: rgba(0,0,127,0.04); | |
| 312 border-left: 28px solid rgba(0,0,127,0.01); | |
| 313 border-right: 28px solid rgba(0,0,127,0.01); | |
| 314 margin-right: 16px; | |
| 315 float: left; | |
| 316 -webkit-box-sizing: border-box; | |
| 317 } | |
| 318 .gridline-right { | |
| 319 float: right; | |
| 320 margin-right: 0; | |
| 321 margin-left: 16px; | |
| 322 } | |
| 323 .gridfill { | |
| 324 background: red; | |
| 325 } | |
| 326 | |
| 327 /*------------------------------------------------------------------ | |
| 328 Component: Typography | |
| 329 ------------------------------------------------------------------*/ | |
| 330 .productName{ | |
| 331 font-size: 20px; | |
| 332 line-height: 24px; | |
| 333 color: #DD4B39; | |
| 334 } | |
| 335 .title{ | |
| 336 color:#1155CC; | |
| 337 font-weight:normal; | |
| 338 } | |
| 339 .greytext{ | |
| 340 color:#777777; | |
| 341 } | |
| 342 .bodylink{ | |
| 343 color:#1155CC; | |
| 344 } | |
| 345 .searchlink{ | |
| 346 color:#1122CC; | |
| 347 } | |
| 348 .visitedlink{ | |
| 349 color:#6611CC; | |
| 350 } | |
| 351 .redlink{ | |
| 352 color:#DD4B39; | |
| 353 } | |
| 354 .secondary{ | |
| 355 font-size:11px; | |
| 356 color:#777777; | |
| 357 } | |
| 358 .secondary.nonLatin{ | |
| 359 font-size:12px; | |
| 360 color:#777777; | |
| 361 } | |
| 362 .source{ | |
| 363 color:#009933; | |
| 364 } | |
| 365 | |
| 366 #typography p { | |
| 367 line-height: 170%; | |
| 368 margin-bottom: 0; | |
| 369 } | |
| 370 | |
| 371 /*------------------------------------------------------------------ | |
| 372 Component: Colors | |
| 373 ------------------------------------------------------------------*/ | |
| 374 #colorTable { | |
| 375 border-left:1px solid #ebebeb; | |
| 376 border-bottom:1px solid #ebebeb; | |
| 377 } | |
| 378 #colorTable th{ | |
| 379 background:#f5f5f5; | |
| 380 border:1px solid #e5e5e5; | |
| 381 border-right:1px solid #e5e5e5; | |
| 382 border-top:1px solid #e5e5e5; | |
| 383 font-weight:bold; | |
| 384 color:#222; | |
| 385 } | |
| 386 #colorTable td, #colorTable th{ | |
| 387 text-align:left; | |
| 388 border-top:1px solid #ebebeb; | |
| 389 border-right:1px solid #ebebeb; | |
| 390 padding:4px 4px; | |
| 391 } | |
| 392 .colorBlock { | |
| 393 color: #FFF; | |
| 394 font-weight: bold; | |
| 395 } | |
| 396 .colorBlock.dark { | |
| 397 color: #222; | |
| 398 } | |
| 399 .colorBlock span { | |
| 400 text-align: left; | |
| 401 display: inline-block; | |
| 402 width: 100%; | |
| 403 } | |
| 404 .colorBlock:first-child { | |
| 405 margin-left: 0; | |
| 406 } | |
| 407 | |
| 408 | |
| 409 /* Background Color Changer */ | |
| 410 #bgColorChanger{ | |
| 411 display:block; | |
| 412 position: relative; | |
| 413 width:250px; | |
| 414 margin-bottom:40px; | |
| 415 | |
| 416 background: #FFF; | |
| 417 outline: 1px solid rgba(0,0,0,0.2); | |
| 418 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 419 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 420 box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| 421 padding: 16px; | |
| 422 -webkit-border-radius: 2px; | |
| 423 -moz-border-radius: 2px; | |
| 424 border-radius: 2px; | |
| 425 } | |
| 426 #bgColorChanger .title { | |
| 427 padding-right:10px; | |
| 428 } | |
| 429 | |
| 430 #otherColor{ | |
| 431 display:none; | |
| 432 width:auto; | |
| 433 margin-top:16px; | |
| 434 } | |
| 435 #otherColor input[type=text]{ | |
| 436 width:auto; | |
| 437 } | |
| 438 #otherColor ul li, #otherColor label{display:inline-block; margin-bottom:0;} | |
| 439 #otherColor ul li{margin-left:8px;} | |
| 440 #otherColor ul li:first-child{margin-left:0;} | |
| 441 | |
| 442 /*------------------------------------------------------------------ | |
| 443 Component: Horizontal Rules | |
| 444 ------------------------------------------------------------------*/ | |
| 445 .whiteBox,.greyBox { | |
| 446 padding: 16px 0; | |
| 447 margin-bottom: 16px; | |
| 448 } | |
| 449 .greyBox { | |
| 450 background: #f1f1f1; | |
| 451 } | |
| 452 .kd-ruledBox { | |
| 453 width: 100%; | |
| 454 } | |
| 455 .kd-greyRuled { | |
| 456 border-top: 1px solid #e5e5e5; | |
| 457 } | |
| 458 .kd-whiteRuled { | |
| 459 border-top: 1px solid #ebebeb; | |
| 460 } | |
| 461 | |
| 462 /*------------------------------------------------------------------ | |
| 463 Component: Shadows | |
| 464 ------------------------------------------------------------------*/ | |
| 465 .shadowList{ | |
| 466 padding:16px; | |
| 467 list-style:disc inside; | |
| 468 } | |
| 469 .shadowList > li{ | |
| 470 margin-bottom:16px; | |
| 471 position:relative; | |
| 472 } | |
| 473 .shadowList .kd-modaldialog{ | |
| 474 display:block; | |
| 475 position:relative; | |
| 476 top:0; | |
| 477 left:0; | |
| 478 opacity:1; | |
| 479 margin:16px 0; | |
| 480 -webkit-transform:none; | |
| 481 } | |
| 482 | |
| 483 /*------------------------------------------------------------------ | |
| 484 Component: Search Bar (Google Bar) | |
| 485 ------------------------------------------------------------------*/ | |
| 486 #kd-searchbar, | |
| 487 #kd-googlebar{ | |
| 488 position:relative; | |
| 489 background:#f1f1f1; | |
| 490 height:29px; | |
| 491 padding:21px 0; | |
| 492 border-bottom:1px solid #e5e5e5; | |
| 493 z-index:40; | |
| 494 } | |
| 495 #kd-googlebar.alternate{ | |
| 496 z-index:30; | |
| 497 } | |
| 498 | |
| 499 /* Search area */ | |
| 500 #kd-search { | |
| 501 position:absolute; | |
| 502 left:220px; | |
| 503 right:308px; | |
| 504 bottom:21px; | |
| 505 max-width:600px; | |
| 506 height:29px; | |
| 507 } | |
| 508 #kd-searchfield { | |
| 509 position:absolute; | |
| 510 left:0; | |
| 511 right:88px; | |
| 512 margin:0; | |
| 513 font-size:16px; | |
| 514 color:#000; | |
| 515 } | |
| 516 ::-webkit-input-placeholder{ | |
| 517 color:#999; | |
| 518 } | |
| 519 #kd-searchfield:-moz-placeholder, input:-moz-placeholder{ | |
| 520 color:#999; | |
| 521 } | |
| 522 #kd-searchbutton { | |
| 523 position:absolute; | |
| 524 top:0; | |
| 525 right:0; | |
| 526 } | |
| 527 #kd-searchbutton img { | |
| 528 opacity:1; | |
| 529 } | |
| 530 #kd-googlebar.alternate #kd-search { | |
| 531 left:414px; | |
| 532 max-width:406px; | |
| 533 } | |
| 534 .kd-googlebuttonbar .kd-button{ | |
| 535 min-width:0; | |
| 536 width:28px; | |
| 537 } | |
| 538 .kd-googlebuttonbar .kd-button .maskedIcon{ | |
| 539 background:#7b7b7b; | |
| 540 display:inline-block; | |
| 541 width:21px; | |
| 542 height:21px; | |
| 543 margin:4px 0 0; | |
| 544 -moz-transition: all 0.218s; | |
| 545 -webkit-transition: all 0.218s; | |
| 546 -o-transition: all 0.218s; | |
| 547 } | |
| 548 .kd-googlebuttonbar .kd-button:hover .maskedIcon, | |
| 549 .kd-googlebuttonbar .kd-button:active .maskedIcon, | |
| 550 .kd-googlebuttonbar .kd-button.selected .maskedIcon{ | |
| 551 background:#DD4B39; | |
| 552 } | |
| 553 .kd-googlebuttonbar .kd-button .maskedIcon img{visibility:hidden;} | |
| 554 .kd-googlebuttonbar.kd-segmentedcontrol{ | |
| 555 display:inline-block; | |
| 556 float:none; | |
| 557 margin-left:0; | |
| 558 } | |
| 559 | |
| 560 | |
| 561 /* Mobile variations */ | |
| 562 .mobile #kd-searchbar, | |
| 563 .mobile #kd-googlebar { | |
| 564 height:29px; | |
| 565 padding:14px 0; | |
| 566 } | |
| 567 .mobile #kd-searchbar .kd-buttonbar.right, | |
| 568 .mobile #kd-googlebar .kd-buttonbar.right{ | |
| 569 margin-right:7px; | |
| 570 } | |
| 571 .mobile #kd-searchbar #kd-social .kd-share, | |
| 572 .mobile #kd-googlebar #kd-social .kd-share{ | |
| 573 padding-left:0; | |
| 574 margin-left:9px; | |
| 575 } | |
| 576 .mobile #kd-searchbar #kd-social .kd-notifications, | |
| 577 .mobile #kd-googlebar #kd-social .kd-notifications{ | |
| 578 min-width:19px; | |
| 579 width:19px; | |
| 580 } | |
| 581 .mobile #kd-searchbar #kd-social .kd-share, | |
| 582 .mobile #kd-googlebar #kd-social .kd-share{ | |
| 583 min-width:19px; | |
| 584 width:19px; | |
| 585 } | |
| 586 .mobile #kd-searchbar #kd-social .kd-avatar, | |
| 587 .mobile #kd-googlebar #kd-social .kd-avatar{ | |
| 588 margin-left:9px; | |
| 589 } | |
| 590 | |
| 591 /*------------------------------------------------------------------ | |
| 592 Subcomponent: App Switcher | |
| 593 ------------------------------------------------------------------*/ | |
| 594 .kd-appswitcher { | |
| 595 position:relative; | |
| 596 top:-21px; | |
| 597 width:160px; | |
| 598 height:71px; | |
| 599 margin:0 0 0 44px; | |
| 600 float:left; | |
| 601 } | |
| 602 .kd-appswitcher .logo { | |
| 603 display:block; | |
| 604 width:160px; | |
| 605 height:71px; | |
| 606 cursor:pointer; | |
| 607 } | |
| 608 .kd-appswitcher .logo img { | |
| 609 display:block; | |
| 610 margin-top:1px; | |
| 611 width:117px; | |
| 612 height:71px; | |
| 613 float:left; | |
| 614 image-rendering:optimizeQuality; | |
| 615 } | |
| 616 .kd-appswitcher .logo .kd-disclosureindicator { | |
| 617 display:block; | |
| 618 position:relative; | |
| 619 top:50%; | |
| 620 float:left; | |
| 621 margin-top:-2px; | |
| 622 margin-left:6px; | |
| 623 background-position:0 0; | |
| 624 -webkit-transform:rotate(90deg); | |
| 625 -moz-transform:rotate(90deg); | |
| 626 transform:rotate(90deg); | |
| 627 opacity:0.3; | |
| 628 | |
| 629 -webkit-transition:opacity 0.218s; | |
| 630 -moz-transition:opacity 0.218s; | |
| 631 transition:opacity 0.218s; | |
| 632 } | |
| 633 .kd-appswitcher:hover .logo .kd-disclosureindicator { | |
| 634 opacity:1; | |
| 635 -webkit-transition:opacity 0.18s; | |
| 636 -moz-transition:opacity 0.18s; | |
| 637 transition:opacity 0.18s; | |
| 638 } | |
| 639 .kd-appswitcher.open span.logo { | |
| 640 cursor:default; | |
| 641 } | |
| 642 | |
| 643 .kd-appswitcher-menu { | |
| 644 position:absolute; | |
| 645 top:71px; | |
| 646 left:-4000px; | |
| 647 max-height:44px; | |
| 648 margin-top:-10px; | |
| 649 | |
| 650 background:#2d2d2d; | |
| 651 border-bottom:1px solid #686868; | |
| 652 | |
| 653 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2); | |
| 654 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2); | |
| 655 box-shadow: 2px 2px 5px rgba(0,0,0,0.2); | |
| 656 | |
| 657 z-index:9999; | |
| 658 opacity:0; | |
| 659 -webkit-transition-property:opacity, max-height, margin, left; | |
| 660 -webkit-transition-duration:0.218s, 0.218s, 0.218s, 0s; | |
| 661 -webkit-transition-delay:0s, 0s, 0s, 0.218s; | |
| 662 -moz-transition-property:opacity, max-height, margin, left; | |
| 663 -moz-transition-duration:0.218s, 0.218s, 0.218s, 0s; | |
| 664 -moz-transition-delay:0s, 0s, 0s, 0.218s; | |
| 665 transition-property:opacity, max-height, margin, left; | |
| 666 transition-duration:0.218s, 0.218s, 0.218s, 0s; | |
| 667 transition-delay:0s, 0s, 0s, 0.218s; | |
| 668 } | |
| 669 .kd-appswitcher.open .kd-appswitcher-menu { | |
| 670 left:-18px; | |
| 671 max-height:400px; | |
| 672 opacity:1; | |
| 673 margin-top:0; | |
| 674 -webkit-transition-property:opacity, max-height, margin, left; | |
| 675 -webkit-transition-duration:0s, 0s, 0.218s, 0s; | |
| 676 -webkit-transition-delay:0s; | |
| 677 -moz-transition-property:opacity, max-height, margin, left; | |
| 678 -moz-transition-duration:0s, 0s, 0.218s, 0s; | |
| 679 -moz-transition-delay:0s; | |
| 680 transition-property:opacity, max-height, margin, left; | |
| 681 transition-duration:0s, 0s, 0.218s, 0s; | |
| 682 transition-delay:0s; | |
| 683 } | |
| 684 .kd-appswitcher-menu:before { | |
| 685 content:""; | |
| 686 display:block; | |
| 687 position:absolute; | |
| 688 top:-12px; | |
| 689 left:133px; | |
| 690 margin-left:-1px; | |
| 691 border-style:solid; | |
| 692 border-color:#777 transparent; | |
| 693 border-width:0 12px 12px; | |
| 694 z-index:20; | |
| 695 } | |
| 696 .kd-appswitcher-menu:after { | |
| 697 content:""; | |
| 698 display:block; | |
| 699 position:absolute; | |
| 700 top:-11px; | |
| 701 left:133px; | |
| 702 border-style:solid; | |
| 703 border-color:#2d2d2d transparent; | |
| 704 border-width:0 11px 11px; | |
| 705 z-index:21; | |
| 706 } | |
| 707 .kd-app { | |
| 708 width:192px; | |
| 709 height:43px; | |
| 710 border-top:1px solid #7d7d7d; | |
| 711 } | |
| 712 .kd-app:first-child { | |
| 713 border-top-color:#2d2d2d; | |
| 714 } | |
| 715 .kd-app > a { | |
| 716 display:block; | |
| 717 width:135px; | |
| 718 height:43px; | |
| 719 line-height:43px; | |
| 720 padding-left:57px; | |
| 721 background-position:12px center; | |
| 722 background-repeat:no-repeat; | |
| 723 color:#fff; | |
| 724 } | |
| 725 .kd-app:hover > a, | |
| 726 a.logo:hover + .kd-appswitcher-menu .kd-app-search > a { | |
| 727 background-color:#4c4c4c; | |
| 728 } | |
| 729 .kd-app-double > a { | |
| 730 height:34px; | |
| 731 padding-top:9px; | |
| 732 line-height:13px; | |
| 733 } | |
| 734 .app-caption { | |
| 735 font-size:10px; | |
| 736 color:rgba(255,255,255,0.5); | |
| 737 } | |
| 738 | |
| 739 .killTransition { | |
| 740 -webkit-transition-duration:0; | |
| 741 -moz-transition-duration:0; | |
| 742 transition:0; | |
| 743 } | |
| 744 .kd-more-menu { | |
| 745 position:absolute; | |
| 746 top:0; | |
| 747 bottom:-1px; | |
| 748 left:-1000%; | |
| 749 width:0; | |
| 750 overflow:hidden; | |
| 751 | |
| 752 background:#fff; | |
| 753 border:1px solid #e5e5e5; | |
| 754 | |
| 755 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 756 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 757 box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| 758 | |
| 759 -webkit-transition-property:width, left; | |
| 760 -webkit-transition-duration:0.218s, 0s; | |
| 761 -webkit-transition-easing-function:ease-in, linear; | |
| 762 -webkit-transition-delay:0.2s, 0.418s; | |
| 763 -moz-transition-property:width, left; | |
| 764 -moz-transition-duration:0.218s, 0s; | |
| 765 -moz-transition-easing-function:ease-in, linear; | |
| 766 -moz-transition-delay:0.2s, 0.418s; | |
| 767 -o-transition-property:width, left; | |
| 768 -o-transition-duration:0.218s, 0s; | |
| 769 -o-transition-easing-function:ease-in, linear; | |
| 770 -o-transition-delay:0.2s, 0.418s; | |
| 771 transition-property:width, left; | |
| 772 transition-duration:0.218s, 0s; | |
| 773 transition-easing-function:ease-in, linear; | |
| 774 transition-delay:0.2s, 0.418s; | |
| 775 } | |
| 776 .kd-app:hover > .kd-more-menu, | |
| 777 .kd-app .kd-more-menu.open { | |
| 778 width:192px; | |
| 779 left:100%; | |
| 780 | |
| 781 -webkit-transition-easing-function:ease-out, linear; | |
| 782 -webkit-transition-delay:0.2s; | |
| 783 -moz-transition-easing-function:ease-out, linear; | |
| 784 -moz-transition-delay:0.2s; | |
| 785 -o-transition-easing-function:ease-out, linear; | |
| 786 -o-transition-delay:0.2s; | |
| 787 transition-easing-function:ease-out, linear; | |
| 788 transition-delay:0.2s; | |
| 789 } | |
| 790 .kd-more-menu .kd-more-container { | |
| 791 position:absolute; | |
| 792 top:0; | |
| 793 right:0; | |
| 794 width:192px; | |
| 795 } | |
| 796 .kd-more-container ul{ | |
| 797 float:left; | |
| 798 } | |
| 799 .kd-appswitcher-menu .kd-app-more:hover .kd-more-menu, | |
| 800 .kd-appswitcher-menu .kd-app-more .kd-more-container { | |
| 801 width:576px; | |
| 802 } | |
| 803 .kd-more-menu .kd-app { border-top:1px solid #e5e5e5; } | |
| 804 .kd-more-menu .kd-app:first-child { border-top:none; } | |
| 805 .kd-more-menu .kd-app:hover > a { background-color:rgba(0,0,0,0.05); } | |
| 806 | |
| 807 .kd-more-menu .kd-app > a { color:#2d2d2d; } | |
| 808 | |
| 809 | |
| 810 .mobile .kd-appswitcher { | |
| 811 position:absolute; | |
| 812 top:0; | |
| 813 left:0; | |
| 814 margin:0 0 0 16px; | |
| 815 float:none; | |
| 816 width:120px; | |
| 817 height:57px; | |
| 818 } | |
| 819 .mobile .kd-appswitcher .kd-appswitcher-menu { top:57px; } | |
| 820 .mobile .kd-appswitcher.open .kd-appswitcher-menu { left:-10px; } | |
| 821 | |
| 822 .mobile .kd-appswitcher .kd-appswitcher-menu:before { | |
| 823 top:-8px; | |
| 824 left:15px; | |
| 825 border-width:0 8px 8px; | |
| 826 } | |
| 827 .mobile .kd-appswitcher .kd-appswitcher-menu:after { | |
| 828 top:-7px; | |
| 829 left:15px; | |
| 830 border-width:0 7px 7px; | |
| 831 } | |
| 832 .mobile .kd-appswitcher .logo { width:120px; height:60px; } | |
| 833 .mobile .kd-appswitcher .logo img { width:99px; height:60px; } | |
| 834 | |
| 835 .mobile .kd-more-menu { left:-9999px; } | |
| 836 .mobile .kd-appswitcher-menu .kd-app-more .kd-more-container { width:192px; } | |
| 837 | |
| 838 .mobile .kd-app:hover > .kd-more-menu, | |
| 839 .mobile .kd-app .kd-more-menu.open { | |
| 840 width:192px; | |
| 841 left:50px; | |
| 842 } | |
| 843 | |
| 844 /*------------------------------------------------------------------ | |
| 845 Component: Sidebars | |
| 846 ------------------------------------------------------------------*/ | |
| 847 #styleguide #sidebars { | |
| 848 overflow: visible; | |
| 849 height: 544px; | |
| 850 } | |
| 851 .sidebarHolder { | |
| 852 width: 220px; | |
| 853 float: left; | |
| 854 /* border-left:1px solid #ebebeb; | |
| 855 border-right:1px solid #ebebeb;*/ | |
| 856 } | |
| 857 .sidebarHolder h4 { | |
| 858 padding: 16px 0; | |
| 859 } | |
| 860 | |
| 861 .kd-content-sidebar { | |
| 862 width:160px; | |
| 863 padding:16px 0px 16px 44px; | |
| 864 border-left:1px solid #ebebeb; | |
| 865 } | |
| 866 .kd-content-sidebar li { | |
| 867 position:relative; | |
| 868 margin-left: -16px; | |
| 869 border-bottom:1px solid transparent; | |
| 870 } | |
| 871 .kd-content-sidebar li a { | |
| 872 display: block; | |
| 873 line-height: 29px; | |
| 874 color: #333; | |
| 875 font-size: 13px; | |
| 876 cursor:default; | |
| 877 } | |
| 878 | |
| 879 .kd-content-sidebar .kd-zippy .row a { | |
| 880 margin-left: 16px; | |
| 881 } | |
| 882 .kd-content-sidebar li | |
| 883 .kd-content-sidebar ul ul{ | |
| 884 margin-left:28px; | |
| 885 } | |
| 886 .kd-content-sidebar ul ul li, | |
| 887 .kd-content-sidebar ul ul li a{ | |
| 888 line-height:19px; | |
| 889 } | |
| 890 .kd-content-sidebar ul ul li a{ | |
| 891 padding-left: 12px; | |
| 892 margin-left: 32px; | |
| 893 } | |
| 894 .kd-content-sidebar ul ul li .kd-disclosureindicator{ | |
| 895 top:0; | |
| 896 height:19px; | |
| 897 } | |
| 898 .kd-content-sidebar ul ul li:hover .kd-disclosureindicator{ | |
| 899 /* height:16px;*/ | |
| 900 } | |
| 901 .kd-content-sidebar li.selected .kd-disclosureindicator, | |
| 902 | |
| 903 .kd-content-sidebar li .kd-disclosureindicator { | |
| 904 position: relative; | |
| 905 display: block; | |
| 906 float: left; | |
| 907 width:15px; | |
| 908 height:29px; | |
| 909 background-position:center; | |
| 910 margin-left:-1px; | |
| 911 opacity: 0.8; | |
| 912 filter: alpha(opacity=80); | |
| 913 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; | |
| 914 -moz-transition: none; | |
| 915 -o-transition: none; | |
| 916 -webkit-transition: none; | |
| 917 cursor:default; | |
| 918 } | |
| 919 .kd-content-sidebar li:hover > .kd-disclosureindicator { | |
| 920 opacity: 1.0; | |
| 921 filter: alpha(opacity=80); | |
| 922 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; | |
| 923 } | |
| 924 | |
| 925 .kd-content-sidebar ul > li > a { | |
| 926 padding-left: 16px; | |
| 927 } | |
| 928 | |
| 929 .kd-content-sidebar ul > li > a:hover { | |
| 930 background-color: #eee; | |
| 931 } | |
| 932 .kd-content-sidebar span.row { | |
| 933 display: block; | |
| 934 } | |
| 935 .kd-content-sidebar span.row.split:hover { | |
| 936 background-color: transparent; | |
| 937 } | |
| 938 | |
| 939 .kd-content-sidebar span.row:hover, | |
| 940 .kd-content-sidebar .kd-zippycontent li a:hover, | |
| 941 .kd-content-sidebar span.row.split a:hover, | |
| 942 .kd-content-sidebar span.row.split .kd-disclosureindicator:hover { | |
| 943 background-color: #eee; | |
| 944 color: #222; | |
| 945 } | |
| 946 | |
| 947 .kd-content-sidebar .kd-zippy span.row:hover .kd-disclosureindicator, | |
| 948 .kd-content-sidebar .kd-zippy span.row.split .kd-disclosureindicator:hover { | |
| 949 opacity: 1.0; | |
| 950 filter: alpha(opacity=80); | |
| 951 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; | |
| 952 } | |
| 953 | |
| 954 .kd-content-sidebar li.selected a { | |
| 955 color: #d14836; | |
| 956 } | |
| 957 ul.iconlist li a, li.kd-labellistitem a { | |
| 958 background-position: 25px 50%; | |
| 959 background-repeat: no-repeat; | |
| 960 } | |
| 961 li.kd-labellistitem.selected a{ | |
| 962 background-position:20px 50%; | |
| 963 } | |
| 964 ul.iconlist li.kd-sidebarlistitem a{ | |
| 965 background-position: 44px 50%; | |
| 966 padding-left:75px; | |
| 967 } | |
| 968 ul.iconlist li.kd-sidebarlistitem.selected a{ | |
| 969 background-position: 39px 50%; | |
| 970 padding-left:70px; | |
| 971 } | |
| 972 .kd-menulabel{ | |
| 973 position:absolute; | |
| 974 height:11px; | |
| 975 width:11px; | |
| 976 top:11px; | |
| 977 right:11px; | |
| 978 cursor:default; | |
| 979 border-radius:1px; | |
| 980 -moz-border-radius:1px; | |
| 981 -webkit-border-radius:1px; | |
| 982 } | |
| 983 .kd-menulabel.red{ | |
| 984 background:#DD4B39; | |
| 985 } | |
| 986 .kd-menulabel.grey{ | |
| 987 background:#999999; | |
| 988 } | |
| 989 .kd-menulabel.blue{ | |
| 990 background:#4D90F0; | |
| 991 } | |
| 992 | |
| 993 .kd-content-sidebar .kd-menulist li{ | |
| 994 margin-left:0; | |
| 995 } | |
| 996 .kd-flyouttrigger.selected .kd-menulist{ | |
| 997 display:block; | |
| 998 } | |
| 999 .kd-flyouttrigger.selected .kd-menulist.clip{ | |
| 1000 overflow-y:auto; | |
| 1001 } | |
| 1002 /*sidebars - extended hover and selected states*/ | |
| 1003 .kd-content-sidebar .kd-sidebarlistitem{ | |
| 1004 margin-left:-44px; | |
| 1005 } | |
| 1006 .kd-content-sidebar .kd-sidebarlistitem > a{ | |
| 1007 padding-left:44px; | |
| 1008 } | |
| 1009 .kd-content-sidebar .kd-sidebarlistitem.selected > a/*, .kd-content-sidebar .kd- sidebarlistitem.kd-zippy.expanded > .row*/{ | |
| 1010 border-left:5px solid #999; | |
| 1011 padding-left:39px; | |
| 1012 } | |
| 1013 .kd-content-sidebar .kd-sidebarlistitem > .row{ | |
| 1014 padding-left:28px; | |
| 1015 } | |
| 1016 /*sidebar zippy*/ | |
| 1017 .kd-content-sidebar .kd-sidebarlistitem.kd-zippy .kd-zippycontent{ | |
| 1018 margin-left:29px; | |
| 1019 } | |
| 1020 | |
| 1021 .kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split:hover .row{ | |
| 1022 background-color:transparent; | |
| 1023 } | |
| 1024 .kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .row{ | |
| 1025 padding-left:0; | |
| 1026 } | |
| 1027 .kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator{ | |
| 1028 padding-left:28px; | |
| 1029 background-position:34px center; | |
| 1030 margin-left:0; | |
| 1031 } | |
| 1032 | |
| 1033 .kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator{ | |
| 1034 width:13px; | |
| 1035 border-right:1px solid #FFF; | |
| 1036 } | |
| 1037 .kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .label > a{ | |
| 1038 margin-left:41px; | |
| 1039 padding-left:3px; | |
| 1040 } | |
| 1041 .kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator:h over, | |
| 1042 /*.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator .down,*/ | |
| 1043 .kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .label:hover{ | |
| 1044 background-color:#EEE; | |
| 1045 color: #222; | |
| 1046 } | |
| 1047 .kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .label{ | |
| 1048 display:block; | |
| 1049 } | |
| 1050 .kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator.d own{ | |
| 1051 background-position:32px center; | |
| 1052 } | |
| 1053 | |
| 1054 /*------------------------------------------------------------------ | |
| 1055 Component: App bars | |
| 1056 ------------------------------------------------------------------*/ | |
| 1057 .kd-appbar { | |
| 1058 position:relative; | |
| 1059 padding: 21px 0; | |
| 1060 border-bottom: 1px solid #ebebeb; | |
| 1061 height: 29px; | |
| 1062 z-index:20; | |
| 1063 background:#fff; | |
| 1064 } | |
| 1065 .kd-appbar .kd-appname { | |
| 1066 width: 160px; | |
| 1067 margin-right: 16px; | |
| 1068 margin-left: 44px; | |
| 1069 height: 29px; | |
| 1070 float: left; | |
| 1071 font-size: 20px; | |
| 1072 font-weight: normal; | |
| 1073 line-height: 29px; | |
| 1074 color: #666; | |
| 1075 white-space:nowrap; | |
| 1076 } | |
| 1077 .kd-appbar .kd-appname a { color: #666; cursor:pointer; } | |
| 1078 #stickers .kd-appbar .kd-buttonbar { | |
| 1079 margin-bottom: 0; | |
| 1080 } | |
| 1081 .kd-buttonbar{ | |
| 1082 height:29px; | |
| 1083 line-height:29px; | |
| 1084 } | |
| 1085 .kd-buttonbar.right { | |
| 1086 float: right; | |
| 1087 margin-right: 44px; | |
| 1088 } | |
| 1089 .kd-buttonbar.left { | |
| 1090 float: left; | |
| 1091 } | |
| 1092 .kd-buttonbar span.kd-count, .kd-buttonbar span.kd-count strong { | |
| 1093 line-height: 29px; | |
| 1094 color: #666; | |
| 1095 } | |
| 1096 .kd-buttonbar.right span.kd-count { | |
| 1097 float: left; | |
| 1098 } | |
| 1099 .kd-buttonbar.left span.kd-count { | |
| 1100 float: right; | |
| 1101 margin-left: 16px; | |
| 1102 } | |
| 1103 #styleguide .section .kd-appbar h4 { | |
| 1104 margin-bottom: 16px; | |
| 1105 } | |
| 1106 | |
| 1107 /* Maps (mini) app bar */ | |
| 1108 .maps .kd-appbar { width:380px; } | |
| 1109 .maps .kd-appbar .kd-appname { width:auto; } | |
| 1110 .maps .kd-maps-collapser { | |
| 1111 display:block; | |
| 1112 position:absolute; | |
| 1113 top:0; | |
| 1114 bottom:0; | |
| 1115 right:0; | |
| 1116 width:15px; | |
| 1117 line-height:71px; | |
| 1118 vertical-align:middle; | |
| 1119 text-align:center; | |
| 1120 border: 1px solid #ebebeb; | |
| 1121 border-width:0 1px; | |
| 1122 background:#fff; | |
| 1123 cursor:pointer; | |
| 1124 -webkit-transition:line-height 0.18s; | |
| 1125 -moz-transition:line-height 0.18s; | |
| 1126 transition:line-height 0.18s; | |
| 1127 } | |
| 1128 .maps .kd-maps-collapser .kd-disclosureindicator { | |
| 1129 -webkit-transform: rotate(-180deg); | |
| 1130 -moz-transform: rotate(-180deg); | |
| 1131 transform: rotate(-180deg); | |
| 1132 } | |
| 1133 .maps .kd-maps-collapser:hover { | |
| 1134 background:#f1f1f1; | |
| 1135 } | |
| 1136 | |
| 1137 /* Mobile app bar */ | |
| 1138 .mobile .kd-appbar { | |
| 1139 padding:7px 0; | |
| 1140 } | |
| 1141 .mobile .kd-appbar .kd-appname{ | |
| 1142 width:auto; | |
| 1143 margin-left:16px; | |
| 1144 margin-right:7px; | |
| 1145 | |
| 1146 font-size:16px; | |
| 1147 } | |
| 1148 .mobile .kd-appbar .kd-appname.arrowed:before { | |
| 1149 display:inline-block; | |
| 1150 content:"‹"; | |
| 1151 text-align:right; | |
| 1152 width:12px; | |
| 1153 margin:0 4px 0 -16px; | |
| 1154 } | |
| 1155 .mobile .kd-appbar .kd-buttonbar.right{ | |
| 1156 margin-right:7px; | |
| 1157 } | |
| 1158 .mobile .kd-appbar .kd-button-action img, | |
| 1159 .mobile .kd-appbar .kd-button-share img, | |
| 1160 .mobile .kd-appbar .kd-button-submit img{ | |
| 1161 opacity:1; | |
| 1162 } | |
| 1163 .mobile .kd-appbar .kd-button.mid { margin-left:-1px; } | |
| 1164 .mobile .kd-appbar .kd-button.right { margin-left:-1px; } | |
| 1165 .mobile .kd-appbar .kd-button:first-child { margin-left:0; } | |
| 1166 .mobile .kd-appbar .cancel-button{ | |
| 1167 display:inline-block; | |
| 1168 height:27px; | |
| 1169 width:34px; | |
| 1170 line-height:27px; | |
| 1171 padding:4px 0; | |
| 1172 text-align:center; | |
| 1173 margin-left:6px; | |
| 1174 margin-right:-6px; | |
| 1175 } | |
| 1176 .mobile .kd-appbar .cancel-button img{ | |
| 1177 opacity:.667; | |
| 1178 } | |
| 1179 | |
| 1180 /*------------------------------------------------------------------ | |
| 1181 Component: Toolbar | |
| 1182 ------------------------------------------------------------------*/ | |
| 1183 .kd-toolbar { | |
| 1184 height: 29px; | |
| 1185 background: #f1f1f1; | |
| 1186 border-top: 1px solid #e5e5e5; | |
| 1187 border-bottom: 1px solid #ebebeb; | |
| 1188 margin-bottom: 44px; | |
| 1189 padding: 8px 44px 4px; | |
| 1190 } | |
| 1191 .kd-toolbar .kd-select .kd-disclosureindicator{ | |
| 1192 margin-top:7px; | |
| 1193 } | |
| 1194 .kd-toolbarbutton { | |
| 1195 border-color: transparent; | |
| 1196 background: 0; | |
| 1197 } | |
| 1198 .kd-toolbar .kd-button{ | |
| 1199 margin-left:0; | |
| 1200 } | |
| 1201 .kd-toolbar .kd-button.right{ | |
| 1202 margin-left:0; | |
| 1203 } | |
| 1204 .kd-toolbarbutton.small, .kd-toolbar .kd-button.small{ | |
| 1205 width:24px; | |
| 1206 min-width:24px; | |
| 1207 } | |
| 1208 .kd-toolbarbutton, .kd-toolbar .kd-button{ | |
| 1209 height:24px; | |
| 1210 line-height:24px; | |
| 1211 } | |
| 1212 .kd-toolbar .kd-menubutton.small{ | |
| 1213 width:34px; | |
| 1214 } | |
| 1215 .kd-toolbar .kd-button{ | |
| 1216 min-width:0; | |
| 1217 } | |
| 1218 .kd-toolbarbutton:hover { | |
| 1219 border: 1px solid #C6C6C6; | |
| 1220 color: #333; | |
| 1221 -webkit-transition: all 0.0s; | |
| 1222 -moz-transition: all 0.0s; | |
| 1223 -o-transition: all 0.0s; | |
| 1224 transition: all 0.0s; | |
| 1225 background-color: #f8f8f8; | |
| 1226 background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8) ,to(#f1f1f1)); | |
| 1227 background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1228 background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1229 background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1230 background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1231 background-image: linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1232 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',E ndColorStr='#f1f1f1'); | |
| 1233 -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); | |
| 1234 -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); | |
| 1235 box-shadow: 0px 1px 1px rgba(0,0,0,0.1); | |
| 1236 } | |
| 1237 .kd-toolbarbutton:active { | |
| 1238 background-color: #f6f6f6; | |
| 1239 background-image: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6) ,to(#f1f1f1)); | |
| 1240 background-image: -webkit-linear-gradient(top,#f6f6f6,#f1f1f1); | |
| 1241 background-image: -moz-linear-gradient(top,#f6f6f6,#f1f1f1); | |
| 1242 background-image: -ms-linear-gradient(top,#f6f6f6,#f1f1f1); | |
| 1243 background-image: -o-linear-gradient(top,#f6f6f6,#f1f1f1); | |
| 1244 background-image: linear-gradient(top,#f6f6f6,#f1f1f1); | |
| 1245 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f6f6f6',E ndColorStr='#f1f1f1'); | |
| 1246 -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1247 -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1248 box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1249 } | |
| 1250 .kd-toolbarbutton:visited { | |
| 1251 color: #666; | |
| 1252 } | |
| 1253 .kd-toolbarbutton.focus { | |
| 1254 outline: none; | |
| 1255 border: 1px solid #4d90fe; | |
| 1256 } | |
| 1257 | |
| 1258 .kd-toolbarbutton.selected, .kd-toolbar .kd-menubutton.selected { | |
| 1259 background-color: #EEEEEE; | |
| 1260 background-image: -webkit-gradient(linear,left top,left bottom,from(#EEEEEE) ,to(#E0E0E0)); | |
| 1261 background-image: -webkit-linear-gradient(top,#EEEEEE,#E0E0E0); | |
| 1262 background-image: -moz-linear-gradient(top,#EEEEEE,#E0E0E0); | |
| 1263 background-image: -ms-linear-gradient(top,#EEEEEE,#E0E0E0); | |
| 1264 background-image: -o-linear-gradient(top,#EEEEEE,#E0E0E0); | |
| 1265 background-image: linear-gradient(top,#EEEEEE,#E0E0E0); | |
| 1266 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE',E ndColorStr='#E0E0E0'); | |
| 1267 -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1268 -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1269 box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1270 border: 1px solid #CCC; | |
| 1271 color: #333; | |
| 1272 } | |
| 1273 | |
| 1274 .kd-toolbar .kd-select, | |
| 1275 .kd-toolbar .kd-menubutton { | |
| 1276 /* background: #fdfdfd;*/ | |
| 1277 border-color:transparent; | |
| 1278 } | |
| 1279 .kd-toolbar .kd-select:hover, .kd-toolbar .kd-menubutton:hover{ | |
| 1280 border: 1px solid #C6C6C6; | |
| 1281 } | |
| 1282 | |
| 1283 .kd-toolbarseparator { | |
| 1284 display: inline-block; | |
| 1285 float: left; | |
| 1286 height: 17px; | |
| 1287 margin: 5px 6px 0 6px; | |
| 1288 border-left: 1px solid #CCC; | |
| 1289 } | |
| 1290 .kd-toolbarseparator.no-margin{ | |
| 1291 margin:5px 0 0 0; | |
| 1292 } | |
| 1293 .buttongroup{ | |
| 1294 margin:0 6px; | |
| 1295 float:left; | |
| 1296 } | |
| 1297 .buttongroup.first{ | |
| 1298 margin-left:0; | |
| 1299 } | |
| 1300 .kd-toolbarseparator + .kd-select.kd-menubutton { | |
| 1301 margin-left: -1px; | |
| 1302 } | |
| 1303 .kd-select.kd-menubutton + .kd-toolbarseparator { | |
| 1304 margin-left: -1px; | |
| 1305 } | |
| 1306 .kd-toolbar .kd-select.kd-menubutton { | |
| 1307 background-color: transparent; | |
| 1308 background-image: none; | |
| 1309 } | |
| 1310 | |
| 1311 /*------------------------------------------------------------------ | |
| 1312 Component: Tabs | |
| 1313 ------------------------------------------------------------------*/ | |
| 1314 #stickersheet .kd-tabbar-horz { | |
| 1315 margin-bottom: 40px; | |
| 1316 } | |
| 1317 .kd-tabbar-horz { | |
| 1318 border-bottom: 1px solid #ccc; | |
| 1319 height: 28px; | |
| 1320 } | |
| 1321 .kd-tabbar-vert { | |
| 1322 border-right: 1px solid #ccc; | |
| 1323 display: inline-block; | |
| 1324 width: 71px; | |
| 1325 height: 100%; | |
| 1326 } | |
| 1327 .kd-tabbutton { | |
| 1328 display: inline-block; | |
| 1329 min-width: 54px;*min-width:70px;/*hello,IE7!*/ | |
| 1330 text-align: center; | |
| 1331 color: #666; | |
| 1332 font-size: 11px; | |
| 1333 font-weight: bold; | |
| 1334 height: 27px; | |
| 1335 padding: 0 8px; | |
| 1336 line-height: 27px; | |
| 1337 -webkit-transition: all 0.218s; | |
| 1338 -moz-transition: all 0.218s; | |
| 1339 -o-transition: all 0.218s; | |
| 1340 transition: all 0.218s; | |
| 1341 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5',E ndColorStr='#f1f1f1'); | |
| 1342 -webkit-user-select:none; | |
| 1343 -moz-user-select:none; | |
| 1344 cursor:default; | |
| 1345 | |
| 1346 border: 1px solid transparent; | |
| 1347 } | |
| 1348 | |
| 1349 .kd-tabbutton:hover { | |
| 1350 color: #222; | |
| 1351 } | |
| 1352 | |
| 1353 .kd-tabbutton:active { | |
| 1354 color: #333; | |
| 1355 } | |
| 1356 | |
| 1357 .kd-tabbutton.selected { | |
| 1358 color: #202020; | |
| 1359 border: 1px solid #ccc; | |
| 1360 } | |
| 1361 | |
| 1362 .kd-tabbar-horz .kd-tabbutton { | |
| 1363 -webkit-border-top-left-radius:2px; | |
| 1364 -webkit-border-top-right-radius:2px; | |
| 1365 -moz-border-radius-topleft: 2px; | |
| 1366 -moz-border-radius-topright: 2px; | |
| 1367 border-top-left-radius: 2px; | |
| 1368 border-top-right-radius: 2px; | |
| 1369 } | |
| 1370 | |
| 1371 .kd-tabbar-vert .kd-tabbutton { | |
| 1372 -webkit-border-top-left-radius:2px; | |
| 1373 -webkit-border-bottom-left-radius:2px; | |
| 1374 -moz-border-radius-topleft: 2px; | |
| 1375 -moz-border-radius-bottomleft: 2px; | |
| 1376 border-top-left-radius: 2px; | |
| 1377 border-bottom-left-radius: 2px; | |
| 1378 } | |
| 1379 | |
| 1380 .kd-tabbar-horz .kd-tabbutton.selected { | |
| 1381 border-bottom: 1px solid #fff; | |
| 1382 | |
| 1383 } | |
| 1384 | |
| 1385 .kd-tabbar-vert .kd-tabbutton.selected { | |
| 1386 border-right: 1px solid #fff; | |
| 1387 } | |
| 1388 | |
| 1389 /*------------------------------------------------------------------ | |
| 1390 Component: Buttons | |
| 1391 ------------------------------------------------------------------*/ | |
| 1392 .kd-button { | |
| 1393 display: inline-block; | |
| 1394 min-width: 54px;*min-width:70px;/*hello,IE7!*/ | |
| 1395 border:1px solid #DCDCDC; | |
| 1396 border: 1px solid rgba(0,0,0,0.1); | |
| 1397 text-align: center; | |
| 1398 color: #444; | |
| 1399 font-size: 11px; | |
| 1400 font-weight: bold; | |
| 1401 height: 27px; | |
| 1402 padding: 0 8px; | |
| 1403 line-height: 27px; | |
| 1404 -webkit-border-radius:2px; | |
| 1405 -moz-border-radius: 2px; | |
| 1406 border-radius: 2px; | |
| 1407 -webkit-transition: all 0.218s; | |
| 1408 -moz-transition: all 0.218s; | |
| 1409 -o-transition: all 0.218s; | |
| 1410 transition: all 0.218s; | |
| 1411 background-color: #f5f5f5; | |
| 1412 background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5) ,to(#f1f1f1)); | |
| 1413 background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1); | |
| 1414 background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1); | |
| 1415 background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1); | |
| 1416 background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1); | |
| 1417 background-image: linear-gradient(top,#f5f5f5,#f1f1f1); | |
| 1418 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5',E ndColorStr='#f1f1f1'); | |
| 1419 -webkit-user-select:none; | |
| 1420 -moz-user-select:none; | |
| 1421 cursor:default; | |
| 1422 } | |
| 1423 .kd-button:hover, .kd-button.hover { | |
| 1424 border: 1px solid #C6C6C6; | |
| 1425 color: #222; | |
| 1426 -webkit-transition: all 0.0s; | |
| 1427 -moz-transition: all 0.0s; | |
| 1428 -o-transition: all 0.0s; | |
| 1429 transition: all 0.0s; | |
| 1430 background-color: #f8f8f8; | |
| 1431 background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8) ,to(#f1f1f1)); | |
| 1432 background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1433 background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1434 background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1435 background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1436 background-image: linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1437 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',E ndColorStr='#f1f1f1'); | |
| 1438 -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); | |
| 1439 -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); | |
| 1440 box-shadow: 0px 1px 1px rgba(0,0,0,0.1); | |
| 1441 } | |
| 1442 .kd-button:active, .kd-button.active { | |
| 1443 background-color: #f6f6f6; | |
| 1444 background-image: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6) ,to(#f1f1f1)); | |
| 1445 background-image: -webkit-linear-gradient(top,#f6f6f6,#f1f1f1); | |
| 1446 background-image: -moz-linear-gradient(top,#f6f6f6,#f1f1f1); | |
| 1447 background-image: -ms-linear-gradient(top,#f6f6f6,#f1f1f1); | |
| 1448 background-image: -o-linear-gradient(top,#f6f6f6,#f1f1f1); | |
| 1449 background-image: linear-gradient(top,#f6f6f6,#f1f1f1); | |
| 1450 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f6f6f6',E ndColorStr='#f1f1f1'); | |
| 1451 -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1452 -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1453 box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1454 } | |
| 1455 .kd-button.active{ | |
| 1456 border: 1px solid #C6C6C6; | |
| 1457 color: #333; | |
| 1458 } | |
| 1459 | |
| 1460 .kd-button:visited { | |
| 1461 color: #666; | |
| 1462 } | |
| 1463 .kd-button.focus, .kd-button.right.focus, .kd-button.mid.focus, .kd-button.left. focus{ | |
| 1464 outline: none; | |
| 1465 border: 1px solid #4d90fe; | |
| 1466 z-index:4 !important; | |
| 1467 } | |
| 1468 | |
| 1469 .kd-button.selected { | |
| 1470 background-color: #EEEEEE; | |
| 1471 background-image: -webkit-gradient(linear,left top,left bottom,from(#EEEEEE) ,to(#E0E0E0)); | |
| 1472 background-image: -webkit-linear-gradient(top,#EEEEEE,#E0E0E0); | |
| 1473 background-image: -moz-linear-gradient(top,#EEEEEE,#E0E0E0); | |
| 1474 background-image: -ms-linear-gradient(top,#EEEEEE,#E0E0E0); | |
| 1475 background-image: -o-linear-gradient(top,#EEEEEE,#E0E0E0); | |
| 1476 background-image: linear-gradient(top,#EEEEEE,#E0E0E0); | |
| 1477 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE',E ndColorStr='#E0E0E0'); | |
| 1478 -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1479 -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1480 box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1481 border: 1px solid #CCC; | |
| 1482 color: #333; | |
| 1483 } | |
| 1484 .kd-button input[type=checkbox] { | |
| 1485 position: relative; | |
| 1486 top: 3px; | |
| 1487 } | |
| 1488 | |
| 1489 .kd-button img { | |
| 1490 display: inline-block; | |
| 1491 margin: -3px 0 0; | |
| 1492 opacity: 0.55; | |
| 1493 *margin:4px 0 0; /*IE7*/ | |
| 1494 /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; //IE CANN OT HANDLE OPACITY ON PNGS, SO WE ARE JUST GONNA REMOVE THESE FILTERS | |
| 1495 filter: alpha(opacity=80);*/ | |
| 1496 | |
| 1497 margin-left: 0px; | |
| 1498 margin-right: 0px; | |
| 1499 vertical-align: middle; | |
| 1500 } | |
| 1501 | |
| 1502 .kd-button.selected img { | |
| 1503 opacity: 0.9; | |
| 1504 /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; | |
| 1505 filter: alpha(opacity=90);*/ | |
| 1506 } | |
| 1507 .kd-button:hover img { | |
| 1508 opacity: 0.72; | |
| 1509 /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; | |
| 1510 filter: alpha(opacity=90);*/ | |
| 1511 } | |
| 1512 .kd-button:active img { | |
| 1513 opacity: 1.0; | |
| 1514 /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| 1515 filter: alpha(opacity=100);*/ | |
| 1516 } | |
| 1517 | |
| 1518 /* Disabled buttons */ | |
| 1519 .kd-button.disabled, .kd-button.disabled:hover, .kd-button.disabled:active { | |
| 1520 background: none; | |
| 1521 color: #b8b8b8; | |
| 1522 border: 1px solid #f3f3f3; | |
| 1523 border: 1px solid rgba(0,0,0,0.05); | |
| 1524 cursor: default; | |
| 1525 pointer-events: none; | |
| 1526 } | |
| 1527 .kd-button.disabled.active{ | |
| 1528 -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1529 -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1530 box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 1531 } | |
| 1532 .kd-button-submit.disabled, .kd-button-submit.disabled:hover, .kd-button-submit. disabled:active, | |
| 1533 .kd-button-share.disabled, .kd-button-share.disabled:hover, .kd-button-share.dis abled:active, | |
| 1534 .kd-button-action.disabled, .kd-button-action.disabled:hover, .kd-button-action. disabled:active { | |
| 1535 border: 1px solid #505050; | |
| 1536 background-color: #666; | |
| 1537 color: #FFF; | |
| 1538 opacity: 0.5; | |
| 1539 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; | |
| 1540 filter: alpha(opacity=50); | |
| 1541 } | |
| 1542 .kd-button.disabled img { | |
| 1543 opacity: 0.5; | |
| 1544 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; | |
| 1545 filter: alpha(opacity=50); | |
| 1546 } | |
| 1547 | |
| 1548 /* Colored Buttons */ | |
| 1549 .kd-button-submit:focus, .kd-button-submit.focus, | |
| 1550 .kd-button-share:focus, .kd-button-share.focus, | |
| 1551 .kd-button-action:focus, .kd-button-action.focus{ | |
| 1552 box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5); | |
| 1553 -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5); | |
| 1554 -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5); | |
| 1555 } | |
| 1556 .kd-button-submit:focus, .kd-button-submit.focus, | |
| 1557 .kd-button-share:focus, .kd-button-share.focus, | |
| 1558 .kd-button-action:focus, .kd-button-action.focus { | |
| 1559 border-color:#404040; | |
| 1560 } | |
| 1561 | |
| 1562 .kd-button-submit:focus:hover, .kd-button-submit.focus:hover, | |
| 1563 .kd-button-share:focus:hover, .kd-button-share.focus:hover, | |
| 1564 .kd-button-action:focus:hover, .kd-button-action.focus:hover{ | |
| 1565 box-shadow:inset 0 0 0 1px #fff, 0px 1px 1px rgba(0,0,0,0.1); | |
| 1566 -webkit-box-shadow:inset 0 0 0 1px #fff, 0px 1px 1px rgba(0,0,0,0.1); | |
| 1567 -moz-box-shadow:inset 0 0 0 1px #fff, 0px 1px 1px rgba(0,0,0,0.1); | |
| 1568 } | |
| 1569 | |
| 1570 .kd-button-submit, | |
| 1571 .kd-button-share, | |
| 1572 .kd-button-action { | |
| 1573 border: 1px solid #505050; | |
| 1574 color: #FFF; | |
| 1575 background-color: #666; | |
| 1576 background-image: -webkit-gradient(linear,left top,left bottom,from(#777),to (#555)); | |
| 1577 background-image: -webkit-linear-gradient(top,#777,#555); | |
| 1578 background-image: -moz-linear-gradient(top,#777,#555); | |
| 1579 background-image: -ms-linear-gradient(top,#777,#555); | |
| 1580 background-image: -o-linear-gradient(top,#777,#555); | |
| 1581 background-image: linear-gradient(top,#777,#555); | |
| 1582 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#777777',E ndColorStr='#555555'); | |
| 1583 } | |
| 1584 .kd-button-submit:hover, | |
| 1585 .kd-button-share:hover, | |
| 1586 .kd-button-action:hover { | |
| 1587 border: 1px solid #404040; | |
| 1588 color: #FFF; | |
| 1589 background-color: #555; | |
| 1590 background-image: -webkit-gradient(linear,left top,left bottom,from(#666),to (#444)); | |
| 1591 background-image: -webkit-linear-gradient(top,#666,#444); | |
| 1592 background-image: -moz-linear-gradient(top,#666,#444); | |
| 1593 background-image: -ms-linear-gradient(top,#666,#444); | |
| 1594 background-image: -o-linear-gradient(top,#666,#444); | |
| 1595 background-image: linear-gradient(top,#666,#444); | |
| 1596 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666',E ndColorStr='#444444'); | |
| 1597 } | |
| 1598 .kd-button-submit:active, .kd-button-submit:focus:active, .kd-button-submit.focu s:active, | |
| 1599 .kd-button-share:active, .kd-button-share:focus:active, .kd-button-share.focus:a ctive, | |
| 1600 .kd-button-action:active, .kd-button-action:focus:active, .kd-button-action.focu s:active { | |
| 1601 -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); | |
| 1602 -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); | |
| 1603 box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); | |
| 1604 } | |
| 1605 | |
| 1606 .kd-button-share { | |
| 1607 text-shadow: 0px 1px rgba(0,0,0,0.1); | |
| 1608 } | |
| 1609 .kd-button-share:hover { | |
| 1610 text-shadow: 0px 1px rgba(0,0,0,0.3); | |
| 1611 } | |
| 1612 .kd-button-action { | |
| 1613 margin-bottom: 16px; | |
| 1614 text-transform: uppercase; | |
| 1615 letter-spacing:1; | |
| 1616 text-shadow: 0px 1px rgba(0,0,0,0.1); | |
| 1617 } | |
| 1618 .kd-button-action:hover { | |
| 1619 -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.2); | |
| 1620 -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.2); | |
| 1621 box-shadow: 0px 1px 1px rgba(0,0,0,0.2); | |
| 1622 } | |
| 1623 .kd-button-action:visited, | |
| 1624 .kd-button-share:visited, | |
| 1625 .kd-button-submit:visited { | |
| 1626 color: #FFF; | |
| 1627 } | |
| 1628 .kd-button.kd-button-action img, | |
| 1629 .kd-button.kd-button-action.selected img, | |
| 1630 .kd-button.kd-button-action:hover img, | |
| 1631 .kd-button.kd-button-action:active img, | |
| 1632 .kd-button.kd-button-submit img, | |
| 1633 .kd-button.kd-button-submit.selected img, | |
| 1634 .kd-button.kd-button-submit:hover img, | |
| 1635 .kd-button.kd-button-submit:active img, | |
| 1636 .kd-button.kd-button-share img, | |
| 1637 .kd-button.kd-button-share.selected img, | |
| 1638 .kd-button.kd-button-share:hover img, | |
| 1639 .kd-button.kd-button-share:active img { | |
| 1640 opacity: 1.0; | |
| 1641 } | |
| 1642 | |
| 1643 /* Buttons of all styles */ | |
| 1644 .kd-buttonbar .kd-button, | |
| 1645 .kd-buttonbar .kd-combobutton, | |
| 1646 .kd-buttonbar .kd-expandbutton { | |
| 1647 float: left; | |
| 1648 margin: 0; | |
| 1649 margin-left: 16px; | |
| 1650 position: relative; | |
| 1651 z-index: 1; | |
| 1652 } | |
| 1653 .left + .kd-combobutton{ | |
| 1654 margin-left:0; | |
| 1655 } | |
| 1656 | |
| 1657 .kd-buttonbar .kd-button:hover { | |
| 1658 z-index: 2; | |
| 1659 } | |
| 1660 .kd-buttonbar .kd-button:first-child, | |
| 1661 .kd-buttonbar .kd-combobutton:first-child, | |
| 1662 .kd-buttonbar .kd-expandbutton:first-child { | |
| 1663 margin-left: 0; | |
| 1664 } | |
| 1665 | |
| 1666 .kd-button.small, | |
| 1667 .mobile .kd-button.small { | |
| 1668 min-width: 34px; | |
| 1669 width: 34px; | |
| 1670 padding: 0; | |
| 1671 } | |
| 1672 .mobile .kd-button { | |
| 1673 min-width:30px; | |
| 1674 width:30px; | |
| 1675 padding:0 8px; | |
| 1676 margin-left:7px; | |
| 1677 } | |
| 1678 .kd-menubutton { | |
| 1679 position: relative; | |
| 1680 } | |
| 1681 .kd-menubutton .kd-disclosureindicator { | |
| 1682 float: right; | |
| 1683 margin-top: 10px; | |
| 1684 margin-left: 7px; | |
| 1685 -webkit-transform: rotate(90deg); | |
| 1686 -moz-transform: rotate(90deg); | |
| 1687 transform: rotate(90deg); | |
| 1688 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); | |
| 1689 opacity: .8; | |
| 1690 -webkit-transition: none; | |
| 1691 -moz-transition: none; | |
| 1692 -o-transition: none; | |
| 1693 transition: none; | |
| 1694 | |
| 1695 /* ie hacks*/ | |
| 1696 *float:none; | |
| 1697 *position:relative; | |
| 1698 *top:-3px; | |
| 1699 margin-top:12px\0/; | |
| 1700 } | |
| 1701 .kd-select { position:relative; } | |
| 1702 .kd-select .kd-disclosureindicator{ | |
| 1703 width:7px; | |
| 1704 height:11px; | |
| 1705 -webkit-transform: none; | |
| 1706 -moz-transform: none; | |
| 1707 transform: none; | |
| 1708 margin-top:8px; | |
| 1709 } | |
| 1710 | |
| 1711 .kd-menubutton.small img { | |
| 1712 margin-left: -8px; | |
| 1713 } | |
| 1714 .kd-menubutton.small .kd-disclosureindicator { | |
| 1715 position: absolute; | |
| 1716 margin: 10px 0; | |
| 1717 right: 4px; | |
| 1718 } | |
| 1719 .kd-menubutton .kd-menulist .kd-disclosureindicator { | |
| 1720 float: none; | |
| 1721 -webkit-transform: rotate(0); | |
| 1722 -moz-transform: rotate(0); | |
| 1723 transform: rotate(0); | |
| 1724 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); | |
| 1725 opacity: .8; | |
| 1726 } | |
| 1727 .kd-menubutton img + .label{ | |
| 1728 margin-left:5px; | |
| 1729 } | |
| 1730 | |
| 1731 .kd-menubutton img { | |
| 1732 display: inline-block; | |
| 1733 } | |
| 1734 .kd-menubutton:hover .kd-disclosureindicator { | |
| 1735 border-left-color: #999; | |
| 1736 opacity: 1; | |
| 1737 } | |
| 1738 .kd-menubutton span.label { | |
| 1739 display: inline-block; | |
| 1740 } | |
| 1741 .kd-combobutton .kd-menubutton:first-child { | |
| 1742 -webkit-border-radius: 2px 0 0 2px; | |
| 1743 -moz-border-radius: 2px 0 0 2px; | |
| 1744 border-radius: 2px 0 0 2px; | |
| 1745 } | |
| 1746 .kd-combobutton .kd-menutrigger, | |
| 1747 .mobile .kd-combobutton .kd-menutrigger { | |
| 1748 margin-left: -1px; | |
| 1749 border-left-color: transparent; | |
| 1750 padding: 0 8px 0 2px; | |
| 1751 width:auto; | |
| 1752 min-width: 0; | |
| 1753 -webkit-border-radius: 0 2px 2px 0; | |
| 1754 -moz-border-radius: 0 2px 2px 0; | |
| 1755 border-radius: 0 2px 2px 0; | |
| 1756 z-index: 0; | |
| 1757 } | |
| 1758 .kd-combobutton .kd-menutrigger:hover { | |
| 1759 border-left-color: #c6c6c6; | |
| 1760 } | |
| 1761 | |
| 1762 .kd-expandbutton { | |
| 1763 display: inline-block; | |
| 1764 overflow: hidden; | |
| 1765 z-index: 0; | |
| 1766 width: 88px; | |
| 1767 height: 29px; | |
| 1768 position: relative; | |
| 1769 -webkit-transition: all 0.218s; | |
| 1770 -moz-transition: all 0.218s; | |
| 1771 -o-transition: all 0.218s; | |
| 1772 transition: all 0.218s; | |
| 1773 cursor:pointer; | |
| 1774 } | |
| 1775 .kd-expandbutton:hover { | |
| 1776 width: 210px; | |
| 1777 margin-left: -100px; | |
| 1778 } | |
| 1779 .kd-expandbutton:hover .expand-options{ | |
| 1780 border-color: #e5e5e5; | |
| 1781 } | |
| 1782 .kd-expandbutton .expand-options { | |
| 1783 display: inline-block; | |
| 1784 background: #f7f7f7; | |
| 1785 border: 1px solid #f0f0f0; | |
| 1786 padding-left: 16px; | |
| 1787 -webkit-border-radius: 2px 0 0 2px; | |
| 1788 -moz-border-radius: 2px 0 0 2px; | |
| 1789 border-radius: 2px 0 0 2px; | |
| 1790 position: absolute; | |
| 1791 left: 0; | |
| 1792 width: 144px; | |
| 1793 font-size:11px; | |
| 1794 } | |
| 1795 .kd-expandbutton .expand-options span { | |
| 1796 float:left; | |
| 1797 padding: 0 8px; | |
| 1798 line-height: 27px; | |
| 1799 color:#666; | |
| 1800 /* border-left:1px solid transparent;*/ | |
| 1801 } | |
| 1802 | |
| 1803 .kd-expandbutton .expand-options span:hover, .kd-expandbutton .expand-options sp an.selected{ | |
| 1804 background-color:#e5e5e5; | |
| 1805 color: #222; | |
| 1806 } | |
| 1807 .kd-expandbutton .expand-options .kd-disclosureindicator { | |
| 1808 position: absolute; | |
| 1809 top: 50%; | |
| 1810 margin-top: -3px; | |
| 1811 left: -3px; | |
| 1812 opacity: .5; | |
| 1813 -webkit-transform: rotate(180deg); | |
| 1814 -moz-transform: rotate(180deg); | |
| 1815 transform: rotate(180deg); | |
| 1816 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); | |
| 1817 | |
| 1818 } | |
| 1819 .kd-expandbutton .main { | |
| 1820 z-index: 1; | |
| 1821 position: absolute; | |
| 1822 right: 0; | |
| 1823 } | |
| 1824 .kd-expandbutton:hover .kd-button.main{ | |
| 1825 border: 1px solid #C6C6C6; | |
| 1826 color: #333; | |
| 1827 -webkit-transition: all 0.0s; | |
| 1828 -moz-transition: all 0.0s; | |
| 1829 -o-transition: all 0.0s; | |
| 1830 transition: all 0.0s; | |
| 1831 background-color: #f8f8f8; | |
| 1832 background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8) ,to(#f1f1f1)); | |
| 1833 background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1834 background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1835 background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1836 background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1837 background-image: linear-gradient(top,#f8f8f8,#f1f1f1); | |
| 1838 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',E ndColorStr='#f1f1f1'); | |
| 1839 -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); | |
| 1840 -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); | |
| 1841 box-shadow: 0px 1px 1px rgba(0,0,0,0.1); | |
| 1842 } | |
| 1843 | |
| 1844 /* Combo/segmented buttons */ | |
| 1845 .kd-combobutton .kd-button-action.small { | |
| 1846 margin: 0 0 0 1px; | |
| 1847 } | |
| 1848 .kd-button.left { | |
| 1849 border-right-color: transparent; | |
| 1850 margin-right: 0; | |
| 1851 -webkit-border-radius: 2px 0 0 2px; | |
| 1852 -moz-border-radius: 2px 0 0 2px; | |
| 1853 border-radius: 2px 0 0 2px; | |
| 1854 } | |
| 1855 .kd-button.left:hover { | |
| 1856 border-right: 1px solid #c6c6c6; | |
| 1857 } | |
| 1858 .kd-button.mid { | |
| 1859 -webkit-border-radius: 0; | |
| 1860 -moz-border-radius: 0; | |
| 1861 border-radius: 0; | |
| 1862 margin-left:0; | |
| 1863 margin-right:0; | |
| 1864 } | |
| 1865 .kd-button.mid + .kd-button.mid, .kd-button.left + .kd-button.mid{ | |
| 1866 margin-left: -1px; | |
| 1867 } | |
| 1868 .kd-button.right { | |
| 1869 margin-left: 0; | |
| 1870 -webkit-border-radius: 0 2px 2px 0; | |
| 1871 -moz-border-radius: 0 2px 2px 0; | |
| 1872 border-radius: 0 2px 2px 0; | |
| 1873 margin-left:-1px; | |
| 1874 } | |
| 1875 .kd-button.right:hover { | |
| 1876 border-left: 1px solid #c6c6c6; | |
| 1877 } | |
| 1878 .kd-segmentedcontrol{ | |
| 1879 float:left; | |
| 1880 margin-left:16px; | |
| 1881 } | |
| 1882 .kd-segmentedcontrol:first-child{ | |
| 1883 margin-left:0; | |
| 1884 } | |
| 1885 .kd-button.left.kd-button-action:hover { | |
| 1886 border-right: 1px solid transparent; | |
| 1887 } | |
| 1888 .kd-button.right.kd-button-action:hover { | |
| 1889 border-left: 1px solid transparent; | |
| 1890 } | |
| 1891 | |
| 1892 /* Mini buttons */ | |
| 1893 .kd-button.mini{ | |
| 1894 height:17px; | |
| 1895 line-height:17px; | |
| 1896 min-width:0; | |
| 1897 } | |
| 1898 /* Mini text input */ | |
| 1899 input[type="text"].mini{ | |
| 1900 height:17px; | |
| 1901 line-height:17px; | |
| 1902 display:inline-block; | |
| 1903 padding:0 2px; | |
| 1904 -webkit-box-sizing:content-box; | |
| 1905 font-size:11px; | |
| 1906 } | |
| 1907 | |
| 1908 /* View toggle buttonset */ | |
| 1909 .kd-viewtoggle{ | |
| 1910 display:block; | |
| 1911 height:29px; | |
| 1912 position:relative; | |
| 1913 } | |
| 1914 .kd-viewtoggle .kd-button{ | |
| 1915 position:absolute; | |
| 1916 margin:0; | |
| 1917 -webkit-transition: right 0.13s; | |
| 1918 -moz-transition: right 0.13s; | |
| 1919 -o-transition: right 0.13s; | |
| 1920 transition: right 0.13s; | |
| 1921 | |
| 1922 -webkit-transition-delay:0.4s; | |
| 1923 -moz-transition-delay:0.4s; | |
| 1924 -o-transition-delay:0.4s; | |
| 1925 transition-delay:0.4s; | |
| 1926 } | |
| 1927 .kd-viewtoggle .kd-button.selected{ | |
| 1928 z-index:3; | |
| 1929 } | |
| 1930 .kd-viewtoggle .tab{ | |
| 1931 position: absolute; | |
| 1932 top: 0; | |
| 1933 right: 36px; | |
| 1934 display:block; | |
| 1935 height:27px; | |
| 1936 width:16px; | |
| 1937 border: 1px solid #ebebeb; | |
| 1938 -webkit-border-radius: 2px 0 0 2px; | |
| 1939 -moz-border-radius: 2px 0 0 2px; | |
| 1940 border-radius: 2px 0 0 2px; | |
| 1941 -webkit-transition: all 0.218s linear 0.4s; | |
| 1942 -moz-transition: all 0.218s linear 0.4s; | |
| 1943 -o-transition: all 0.218s linear 0.4s; | |
| 1944 transition: all 0.218s linear 0.4s; | |
| 1945 } | |
| 1946 .kd-viewtoggle.wide .tab{ | |
| 1947 right:72px; | |
| 1948 } | |
| 1949 .kd-viewtoggle:hover .kd-button{ | |
| 1950 -webkit-transition-delay:0; | |
| 1951 -moz-transition-delay:0; | |
| 1952 -o-transition-delay:0; | |
| 1953 transition-delay:0; | |
| 1954 } | |
| 1955 .kd-viewtoggle:hover .tab{ | |
| 1956 right:0; | |
| 1957 } | |
| 1958 .kd-viewtoggle .kd-button.selected{ | |
| 1959 border-color:#CCC; | |
| 1960 -webkit-border-radius: 2px; | |
| 1961 -moz-border-radius: 2px; | |
| 1962 border-radius: 2px; | |
| 1963 } | |
| 1964 | |
| 1965 /* Colored button bar */ | |
| 1966 .kd-buttonbar-colored { | |
| 1967 padding:10px; | |
| 1968 height:19px; | |
| 1969 background: #4D90FE; | |
| 1970 } | |
| 1971 .kd-buttonbar-colored span { | |
| 1972 font-size: 13px; | |
| 1973 font-weight: bold; | |
| 1974 color: white; | |
| 1975 float: left; | |
| 1976 line-height: 19px; | |
| 1977 height:19px; | |
| 1978 background: #4D90FE; | |
| 1979 text-shadow: 0px 1px 0px rgba(0,0,0,0.3); | |
| 1980 } | |
| 1981 .kd-buttonbar-colored .kd-button{ | |
| 1982 color: white; | |
| 1983 height:19px; | |
| 1984 font-size: 11px; | |
| 1985 margin-top:-1px; | |
| 1986 background: none; | |
| 1987 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba( 0,0,0,0.16)), to(rgba(0,0,0,0.2))); | |
| 1988 background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0, 0.2)); | |
| 1989 background-image: -moz-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0, 0.2)); | |
| 1990 background-image: -ms-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0, 0.2)); | |
| 1991 background-image: -o-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0, 0.2)); | |
| 1992 background-image: linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0, 0.2)); | |
| 1993 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#160000FF, endColorstr=#220000FF); | |
| 1994 -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#160000 FF, endColorstr=#220000FF); | |
| 1995 } | |
| 1996 .kd-buttonbar-colored .kd-button:hover, | |
| 1997 .kd-buttonbar-colored .kd-button.hover { | |
| 1998 color: white; | |
| 1999 background: none; | |
| 2000 border: 1px solid rgba(0,0,0,0.2); | |
| 2001 | |
| 2002 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba( 0,0,0,0.14)), to(rgba(0,0,0,0.2))); | |
| 2003 background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0, 0.2)); | |
| 2004 background-image: -moz-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0, 0.2)); | |
| 2005 background-image: -ms-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0, 0.2)); | |
| 2006 background-image: -o-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0, 0.2)); | |
| 2007 background-image: linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0, 0.2)); | |
| 2008 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#14000000, endColorstr=#22000000); | |
| 2009 -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#140000 00, endColorstr=#22000000); | |
| 2010 } | |
| 2011 .kd-buttonbar-colored .kd-button.focus, .kd-button.right.focus, | |
| 2012 .kd-buttonbar-colored .kd-button.mid.focus, .kd-button.left.focus{ | |
| 2013 outline: none; | |
| 2014 border: 1px solid white; | |
| 2015 z-index:4 !important; | |
| 2016 } | |
| 2017 .kd-buttonbar-colored .kd-button.disabled, | |
| 2018 .kd-buttonbar-colored .kd-button.disabled:hover, | |
| 2019 .kd-buttonbar-colored .kd-button.disabled:active { | |
| 2020 color: rgba(255, 255, 255, 0.5); | |
| 2021 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFFFF, endColorstr=#50FFFFFF); | |
| 2022 -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFF FF, endColorstr=#50FFFFFF); | |
| 2023 } | |
| 2024 | |
| 2025 /* Slide toggle button */ | |
| 2026 .kd-slidetoggle{ | |
| 2027 height: 27px; | |
| 2028 line-height: 27px; | |
| 2029 width:94px; | |
| 2030 padding:0; | |
| 2031 -webkit-border-radius:2px; | |
| 2032 -moz-border-radius: 2px; | |
| 2033 border-radius: 2px; | |
| 2034 border:1px solid #CCC; | |
| 2035 font-weight:bold; | |
| 2036 color:#666; | |
| 2037 position:relative; | |
| 2038 overflow:hidden; | |
| 2039 | |
| 2040 background-image: -webkit-gradient(linear, left top, left bottom, from(#EEEE EE), to(#e0e0e0)); | |
| 2041 background-image: -webkit-linear-gradient(top, #EEEEEE, #e0e0e0); | |
| 2042 background-image: -moz-linear-gradient(top, #EEEEEE, #e0e0e0); | |
| 2043 background-image: -ms-linear-gradient(top, #EEEEEE, #e0e0e0); | |
| 2044 background-image: -o-linear-gradient(top, #EEEEEE, #e0e0e0); | |
| 2045 background-image: linear-gradient(top, #EEEEEE, #e0e0e0); | |
| 2046 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EEEEEE, en dColorstr=#e0e0e0); | |
| 2047 -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EEEEEE , endColorstr=#e0e0e0); | |
| 2048 | |
| 2049 -webkit-box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1); | |
| 2050 -moz-box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1); | |
| 2051 box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1); | |
| 2052 } | |
| 2053 .kd-slidetoggle span { | |
| 2054 display: inline-block; | |
| 2055 width: 45px; | |
| 2056 text-align: center; | |
| 2057 | |
| 2058 -webkit-border-radius:2px 2px 0 0; | |
| 2059 -moz-border-radius: 2px 2px 0 0; | |
| 2060 border-radius: 2px 2px 0 0; | |
| 2061 } | |
| 2062 .kd-slidetoggle span.on{ | |
| 2063 background-image: -webkit-gradient(linear, left top, left bottom, from(#3b93 ff), to(#3689EE)); | |
| 2064 background-image: -webkit-linear-gradient(top, #3b93ff, #3689EE); | |
| 2065 background-image: -moz-linear-gradient(top, #3b93ff, #3689EE); | |
| 2066 background-image: -ms-linear-gradient(top, #3b93ff, #3689EE); | |
| 2067 background-image: -o-linear-gradient(top, #3b93ff, #3689EE); | |
| 2068 background-image: linear-gradient(top, #3b93ff, #3689EE); | |
| 2069 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3b93ff, en dColorstr=#3689EE); | |
| 2070 -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3b93ff , endColorstr=#3689EE); | |
| 2071 | |
| 2072 color:#FFF; | |
| 2073 | |
| 2074 width:47px; | |
| 2075 margin-right:-2px; | |
| 2076 | |
| 2077 -webkit-box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1); | |
| 2078 -moz-box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1); | |
| 2079 box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1); | |
| 2080 | |
| 2081 -webkit-border-radius:2px 0 0 2px; | |
| 2082 -moz-border-radius: 2px 0 0 2px; | |
| 2083 border-radius: 2px 0 0 2px; | |
| 2084 } | |
| 2085 .kd-slidetoggle .thumb{ | |
| 2086 content:''; | |
| 2087 position:absolute; | |
| 2088 display:block; | |
| 2089 top:-1px; | |
| 2090 left:-1px; | |
| 2091 height:27px; | |
| 2092 width:47px; | |
| 2093 border:1px solid #CCC; | |
| 2094 -webkit-border-radius:2px; | |
| 2095 -moz-border-radius: 2px; | |
| 2096 border-radius: 2px; | |
| 2097 | |
| 2098 -webkit-box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.1); | |
| 2099 -moz-box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.1); | |
| 2100 box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.1); | |
| 2101 | |
| 2102 background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8 f8), to(#f1f1f1)); | |
| 2103 background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1); | |
| 2104 background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1); | |
| 2105 background-image: -ms-linear-gradient(top, #f8f8f8, #f1f1f1); | |
| 2106 background-image: -o-linear-gradient(top, #f8f8f8, #f1f1f1); | |
| 2107 background-image: linear-gradient(top, #f8f8f8, #f1f1f1); | |
| 2108 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, en dColorstr=#f1f1f1); | |
| 2109 -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8 , endColorstr=#f1f1f1); | |
| 2110 | |
| 2111 -webkit-transition: all 0.130s ease-out; | |
| 2112 -moz-transition: all 0.130s ease-out; | |
| 2113 -o-transition: all 0.130s ease-out; | |
| 2114 transition: all 0.130s ease-out; | |
| 2115 } | |
| 2116 .kd-slidetoggle.on .thumb{ | |
| 2117 left:46px; | |
| 2118 } | |
| 2119 .kd-slidetoggle .thumb::after{ | |
| 2120 content:""; | |
| 2121 position:absolute; | |
| 2122 display:block; | |
| 2123 top:9px; | |
| 2124 left:15px; | |
| 2125 height:9px; | |
| 2126 width:17px; | |
| 2127 background-image: | |
| 2128 -webkit-linear-gradient(left, #ccc 50%, transparent 50%), | |
| 2129 -webkit-linear-gradient(left, #ccc 50%, transparent 50%), | |
| 2130 -webkit-linear-gradient(left, #ccc 50%, transparent 50%), | |
| 2131 -webkit-linear-gradient(left, #ccc 50%, transparent 50%), | |
| 2132 -webkit-linear-gradient(left, #ccc 50%, transparent 50%); | |
| 2133 background-size:2px 0; | |
| 2134 background-position:0 0, 0 2px, 0 4px, 0 6px, 0 8px; | |
| 2135 background-repeat:repeat-x; | |
| 2136 } | |
| 2137 | |
| 2138 /*------------------------------------------------------------------ | |
| 2139 Component: Butter Bar | |
| 2140 ------------------------------------------------------------------*/ | |
| 2141 .kd-butterbar { | |
| 2142 position: absolute; | |
| 2143 text-align:center; | |
| 2144 bottom:0; | |
| 2145 padding:0 16px; | |
| 2146 background:#F9EDBE; | |
| 2147 border:1px solid #F0C36D; | |
| 2148 margin-bottom:-15px; | |
| 2149 left:-1000%; | |
| 2150 | |
| 2151 -webkit-border-radius:2px; | |
| 2152 -moz-border-radius:2px; | |
| 2153 border-radius:2px; | |
| 2154 | |
| 2155 margin-left:-190px; | |
| 2156 opacity:0; | |
| 2157 | |
| 2158 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 2159 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 2160 box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| 2161 | |
| 2162 -webkit-transform:scale(.2); | |
| 2163 -moz-transform:scale(.2); | |
| 2164 -o-transform:scale(.2); | |
| 2165 transform:scale(.2); | |
| 2166 | |
| 2167 -webkit-transition: opacity 1s, -webkit-transform 0 linear 1s, left 0 linear 1s; | |
| 2168 -moz-transition: opacity 0.130s; | |
| 2169 -o-transition: opacity 0.130s; | |
| 2170 transition: opacity 0.130s; | |
| 2171 } | |
| 2172 .kd-butterbar.shown{ | |
| 2173 opacity:1; | |
| 2174 left:496px; | |
| 2175 -webkit-transform:scale(1.00); | |
| 2176 | |
| 2177 -webkit-transition: all 0.130s, left 0 linear 0; | |
| 2178 -moz-transition: all 0.218s; | |
| 2179 -o-transition: all 0.218s; | |
| 2180 /* transition: all 0.218s, left 0;*/ | |
| 2181 } | |
| 2182 .kd-butterbar p{ | |
| 2183 margin-bottom:0; | |
| 2184 line-height:29px; | |
| 2185 font-size:11px; | |
| 2186 } | |
| 2187 | |
| 2188 .kd-butterbar a{ | |
| 2189 color:#333; | |
| 2190 text-decoration:underline; | |
| 2191 } | |
| 2192 .kd-butterbar a:hover{ | |
| 2193 color:#202020; | |
| 2194 } | |
| 2195 | |
| 2196 .kd-butterbar.mini{ | |
| 2197 margin-bottom:-5px; | |
| 2198 } | |
| 2199 .kd-butterbar.mini p{ | |
| 2200 line-height:19px; | |
| 2201 } | |
| 2202 | |
| 2203 /*------------------------------------------------------------------ | |
| 2204 Component: Text Field, Autocomplete | |
| 2205 ------------------------------------------------------------------*/ | |
| 2206 input[type=text] { | |
| 2207 height: 29px; | |
| 2208 background-color: #FFF; | |
| 2209 line-height: 27px; | |
| 2210 padding-left: 8px; | |
| 2211 color: #333; | |
| 2212 border: 1px solid #d9d9d9; | |
| 2213 border-top: 1px solid #c0c0c0; | |
| 2214 display: inline-block; | |
| 2215 vertical-align: top; | |
| 2216 -webkit-box-sizing: border-box; | |
| 2217 box-sizing: border-box; | |
| 2218 -webkit-border-radius: 1px; | |
| 2219 } | |
| 2220 input[type=text]:hover { | |
| 2221 border: 1px solid #b9b9b9; | |
| 2222 border-top: 1px solid #a0a0a0; | |
| 2223 -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 2224 -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 2225 box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 2226 } | |
| 2227 input[type=text]:focus { | |
| 2228 -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); | |
| 2229 -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); | |
| 2230 box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); | |
| 2231 outline: none; | |
| 2232 border: 1px solid #4d90fe; | |
| 2233 } | |
| 2234 input#fakesearch { | |
| 2235 width: 512px; | |
| 2236 font-size: 16px; | |
| 2237 } | |
| 2238 input#fakesearch:focus + .kd-autocomplete { | |
| 2239 display: block; | |
| 2240 } | |
| 2241 .kd-search-form { | |
| 2242 position: relative; | |
| 2243 } | |
| 2244 .kd-autocomplete { | |
| 2245 width: 510px; | |
| 2246 padding: 0; | |
| 2247 display: none; | |
| 2248 position: absolute; | |
| 2249 left: 1px; | |
| 2250 top: 29px; | |
| 2251 z-index: 100; | |
| 2252 } | |
| 2253 .kd-autocompletelistitem { | |
| 2254 font-size: 16px; | |
| 2255 line-height: 30px; | |
| 2256 padding-left: 10px; | |
| 2257 } | |
| 2258 .kd-autocompletelistitem:hover { | |
| 2259 background: #eee; | |
| 2260 } | |
| 2261 | |
| 2262 /*------------------------------------------------------------------ | |
| 2263 Component: Zippy | |
| 2264 ------------------------------------------------------------------*/ | |
| 2265 .kd-zippycontent { | |
| 2266 position: relative; | |
| 2267 overflow: hidden; | |
| 2268 height: 0; | |
| 2269 -webkit-transition: all 0.218s; | |
| 2270 -moz-transition: all 0.218s; | |
| 2271 -o-transition: all 0.218s; | |
| 2272 transition: all 0.218s; | |
| 2273 } | |
| 2274 .kd-zippycontent > *{position:absolute;bottom:0; left:0; width:100%;} | |
| 2275 .kd-zippy.expanded .kd-zippycontent{} | |
| 2276 | |
| 2277 .kd-zippycontent ul.iconList li a { | |
| 2278 padding-left: 30px; | |
| 2279 margin-left: 32px; | |
| 2280 background-repeat: no-repeat; | |
| 2281 background-position: 2px center; | |
| 2282 line-height: 23px; | |
| 2283 } | |
| 2284 | |
| 2285 /* zippy as folder */ | |
| 2286 .kd-zippy.kd-parent img.icon{ float:left; position:relative; top:2px; margin-rig ht:5px; opacity:.6;} | |
| 2287 .kd-zippy.kd-parent ul li a{line-height:23px; padding-left:0;} | |
| 2288 .kd-zippy.kd-parent.has_icon ul li a{padding-left:23px;} | |
| 2289 .kd-zippy.kd-parent ul li img.icon{top:-1px;} | |
| 2290 | |
| 2291 /*------------------------------------------------------------------ | |
| 2292 Component: Accordion | |
| 2293 ------------------------------------------------------------------*/ | |
| 2294 .kd-accordion .kd-zippy{ | |
| 2295 border-bottom:1px solid #ebebeb; | |
| 2296 } | |
| 2297 .kd-accordion label{ | |
| 2298 display:block; | |
| 2299 } | |
| 2300 .kd-accordion .kd-zippycontent{ | |
| 2301 } | |
| 2302 .kd-accordion .kd-zippycontent > ul{ | |
| 2303 bottom:auto; | |
| 2304 top:0; | |
| 2305 } | |
| 2306 .kd-accordion .kd-zippycontent ul li{ | |
| 2307 margin-left:28px; | |
| 2308 line-height:29px; | |
| 2309 } | |
| 2310 .kd-accordion .kd-zippycontent ul li input[type=radio]{ | |
| 2311 margin-bottom:-2px; | |
| 2312 } | |
| 2313 .kd-accordion .row > a{ | |
| 2314 -webkit-transition: color 0.130s linear; | |
| 2315 -moz-transition: color 0.130s linear; | |
| 2316 -o-transition: color 0.130s linear; | |
| 2317 transition: color 0.130s linear; | |
| 2318 } | |
| 2319 .kd-accordion .expanded .row > a{ | |
| 2320 color:#222; | |
| 2321 font-weight:bold; | |
| 2322 } | |
| 2323 .kd-accordion .expanded .row .kd-disclosureindicator{ | |
| 2324 | |
| 2325 | |
| 2326 } | |
| 2327 | |
| 2328 /*------------------------------------------------------------------ | |
| 2329 Compondent: Slider | |
| 2330 ------------------------------------------------------------------*/ | |
| 2331 .kd-slider { | |
| 2332 position:relative; | |
| 2333 width:137px; | |
| 2334 height:5px; | |
| 2335 padding:5px 0; | |
| 2336 margin-bottom:20px; | |
| 2337 | |
| 2338 cursor:default; | |
| 2339 -webkit-user-select:none; | |
| 2340 -moz-user-select:none; | |
| 2341 } | |
| 2342 .kd-slider:before { | |
| 2343 content:""; | |
| 2344 display:block; | |
| 2345 width:141px; | |
| 2346 height:5px; | |
| 2347 margin-left:-2px; | |
| 2348 -webkit-border-radius:3px; | |
| 2349 -moz-border-radius:3px; | |
| 2350 border-radius:3px; | |
| 2351 background:#e5e5e5; | |
| 2352 } | |
| 2353 .kd-slider:hover:before { | |
| 2354 background:#d1d1d1; | |
| 2355 } | |
| 2356 | |
| 2357 .kd-slider .kd-sliderhandle { | |
| 2358 display:block; | |
| 2359 position:absolute; | |
| 2360 top:50%; | |
| 2361 left:0; | |
| 2362 z-index:1; | |
| 2363 | |
| 2364 background:#999; | |
| 2365 cursor:pointer; | |
| 2366 cursor:col-resize; | |
| 2367 | |
| 2368 -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.1); | |
| 2369 -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1); | |
| 2370 box-shadow:0px 1px 1px rgba(0,0,0,0.1); | |
| 2371 | |
| 2372 -webkit-transition: left 0.218s; | |
| 2373 -moz-transition: left 0.218s; | |
| 2374 -o-transition: left 0.218s; | |
| 2375 transition: left 0.218s; | |
| 2376 } | |
| 2377 .kd-slider .kd-sliderhandle-inner { | |
| 2378 display:block; | |
| 2379 position:absolute; | |
| 2380 top:1px; | |
| 2381 left:1px; | |
| 2382 | |
| 2383 background:#999; | |
| 2384 text-align:center; | |
| 2385 text-indent:-9999px; | |
| 2386 line-height:15px; | |
| 2387 } | |
| 2388 .kd-slider:hover .kd-sliderhandle-inner { | |
| 2389 background:#fff; | |
| 2390 } | |
| 2391 .kd-slider .kd-sliderhandle:active { | |
| 2392 background:#535252; | |
| 2393 } | |
| 2394 .kd-slider:active .kd-sliderhandle { | |
| 2395 -webkit-transition: left 0; | |
| 2396 -moz-transition: left 0; | |
| 2397 -o-transition: left 0; | |
| 2398 transition: left 0; | |
| 2399 } | |
| 2400 .kd-slider .kd-sliderhandle:active .kd-sliderhandle-inner { | |
| 2401 background:#535252; | |
| 2402 } | |
| 2403 .kd-slider.kd-slider-range .kd-sliderambit { | |
| 2404 display:block; | |
| 2405 position:absolute; | |
| 2406 top:0; | |
| 2407 left:0; | |
| 2408 height:5px; | |
| 2409 margin-top:5px; | |
| 2410 | |
| 2411 background:#c6c6c6; | |
| 2412 cursor:pointer; | |
| 2413 cursor:move; | |
| 2414 } | |
| 2415 .kd-slider.kd-slider-range:hover .kd-sliderambit { | |
| 2416 background:#535252; | |
| 2417 } | |
| 2418 .kd-slider.kd-slider-range:active .kd-sliderambit { | |
| 2419 background-color:#999; | |
| 2420 background-size:6px 6px; | |
| 2421 background-position:left -1px; | |
| 2422 background-repeat:repeat-x; | |
| 2423 background-image:-webkit-linear-gradient(135deg, transparent, transparent 3p x, #fff 3px, #fff 4px, transparent 4px, transparent); | |
| 2424 background-image:-moz-linear-gradient(135deg, transparent, transparent 3px, #fff 3px, #fff 4px, transparent 4px, transparent); | |
| 2425 background-image:-o-linear-gradient(135deg, transparent, transparent 3px, #f ff 3px, #fff 4px, transparent 4px, transparent); | |
| 2426 background-image:linear-gradient(135deg, transparent, transparent 3px, #fff 3px, #fff 4px, transparent 4px, transparent); | |
| 2427 } | |
| 2428 | |
| 2429 .kd-slider-continuous .kd-sliderhandle { | |
| 2430 width:17px; | |
| 2431 height:17px; | |
| 2432 margin-top:-8px; | |
| 2433 margin-left:-8px; | |
| 2434 | |
| 2435 -webkit-border-radius:8px; | |
| 2436 -moz-border-radius:8px; | |
| 2437 border-radius:8px; | |
| 2438 } | |
| 2439 .kd-slider-continuous .kd-sliderhandle-inner { | |
| 2440 width:15px; | |
| 2441 height:15px; | |
| 2442 | |
| 2443 -webkit-border-radius:7px; | |
| 2444 -moz-border-radius:7px; | |
| 2445 border-radius:7px; | |
| 2446 } | |
| 2447 .kd-slider-continuous.kd-slider-range .kd-sliderhandle { | |
| 2448 width:9px; | |
| 2449 | |
| 2450 -webkit-border-radius:0; | |
| 2451 -moz-border-radius:0; | |
| 2452 border-radius:0; | |
| 2453 } | |
| 2454 .kd-slider-continuous.kd-slider-range .kd-sliderhandle-inner { | |
| 2455 width:7px; | |
| 2456 | |
| 2457 -webkit-border-radius:0; | |
| 2458 -moz-border-radius:0; | |
| 2459 border-radius:0; | |
| 2460 } | |
| 2461 .kd-slider-continuous.kd-slider-range .kd-sliderhandle-min { | |
| 2462 -webkit-border-top-left-radius: 8px; | |
| 2463 -webkit-border-bottom-left-radius: 8px; | |
| 2464 -moz-border-radius-topleft: 8px; | |
| 2465 -moz-border-radius-bottomleft: 8px; | |
| 2466 border-top-left-radius: 8px; | |
| 2467 border-bottom-left-radius: 8px; | |
| 2468 } | |
| 2469 .kd-slider-continuous.kd-slider-range .kd-sliderhandle-min .kd-sliderhandle-inne r { | |
| 2470 -webkit-border-top-left-radius: 6px; | |
| 2471 -webkit-border-bottom-left-radius: 6px; | |
| 2472 -moz-border-radius-topleft: 6px; | |
| 2473 -moz-border-radius-bottomleft: 6px; | |
| 2474 border-top-left-radius: 6px; | |
| 2475 border-bottom-left-radius: 6px; | |
| 2476 } | |
| 2477 .kd-slider-continuous.kd-slider-range .kd-sliderhandle-max { | |
| 2478 margin-left:0; | |
| 2479 -webkit-border-top-right-radius: 8px; | |
| 2480 -webkit-border-bottom-right-radius: 8px; | |
| 2481 -moz-border-radius-topright: 8px; | |
| 2482 -moz-border-radius-bottomright: 8px; | |
| 2483 border-top-right-radius: 8px; | |
| 2484 border-bottom-right-radius: 8px; | |
| 2485 } | |
| 2486 .kd-slider-continuous.kd-slider-range .kd-sliderhandle-max .kd-sliderhandle-inne r { | |
| 2487 -webkit-border-top-right-radius: 6px; | |
| 2488 -webkit-border-bottom-right-radius: 6px; | |
| 2489 -moz-border-radius-topright: 6px; | |
| 2490 -moz-border-radius-bottomright: 6px; | |
| 2491 border-top-right-radius: 6px; | |
| 2492 border-bottom-right-radius: 6px; | |
| 2493 } | |
| 2494 | |
| 2495 .kd-slider-discrete { | |
| 2496 padding-bottom:26px; | |
| 2497 } | |
| 2498 .kd-slider-discrete .kd-sliderhandle { | |
| 2499 width:16px; | |
| 2500 height:9px; | |
| 2501 margin-top:-18px; | |
| 2502 margin-left:-8px; | |
| 2503 | |
| 2504 -webkit-border-top-left-radius: 3px; | |
| 2505 -webkit-border-top-right-radius: 3px; | |
| 2506 -moz-border-radius-topleft: 3px; | |
| 2507 -moz-border-radius-topright: 3px; | |
| 2508 border-top-left-radius: 3px; | |
| 2509 border-top-right-radius: 3px; | |
| 2510 } | |
| 2511 .kd-slider-discrete .kd-sliderhandle:before { | |
| 2512 content:""; | |
| 2513 display:block; | |
| 2514 position:absolute; | |
| 2515 top:9px; | |
| 2516 border-style:solid; | |
| 2517 border-color:#999 transparent; | |
| 2518 border-width:8px 8px 0; | |
| 2519 } | |
| 2520 .kd-slider-discrete .kd-sliderhandle:active:before { | |
| 2521 border-color:#535252 transparent; | |
| 2522 } | |
| 2523 .kd-slider-discrete .kd-sliderhandle-inner { | |
| 2524 width:14px; | |
| 2525 height:8px; | |
| 2526 | |
| 2527 -webkit-border-top-left-radius: 2px; | |
| 2528 -webkit-border-top-right-radius: 2px; | |
| 2529 -moz-border-radius-topleft: 2px; | |
| 2530 -moz-border-radius-topright: 2px; | |
| 2531 border-top-left-radius: 2px; | |
| 2532 border-top-right-radius: 2px; | |
| 2533 } | |
| 2534 .kd-slider-discrete .kd-sliderhandle-inner:before { | |
| 2535 content:""; | |
| 2536 display:block; | |
| 2537 position:absolute; | |
| 2538 top:8px; | |
| 2539 border-style:solid; | |
| 2540 border-color:#999 transparent; | |
| 2541 border-width:7px 7px 0; | |
| 2542 } | |
| 2543 .kd-slider-discrete:hover .kd-sliderhandle-inner { | |
| 2544 background:#fff; | |
| 2545 } | |
| 2546 .kd-slider-discrete:hover .kd-sliderhandle-inner:before { | |
| 2547 border-color:#fff transparent; | |
| 2548 } | |
| 2549 .kd-slider-discrete .kd-sliderhandle:active .kd-sliderhandle-inner:before { | |
| 2550 border-color:#535252 transparent; | |
| 2551 } | |
| 2552 | |
| 2553 .kd-slider-discrete.kd-slider-range .kd-sliderhandle { | |
| 2554 width:8px; | |
| 2555 } | |
| 2556 .kd-slider-discrete.kd-slider-range .kd-sliderhandle-inner { | |
| 2557 width:6px; | |
| 2558 } | |
| 2559 .kd-slider-discrete.kd-slider-range .kd-sliderhandle-min { | |
| 2560 margin-left:-7px; | |
| 2561 -webkit-border-top-right-radius: 0; | |
| 2562 -moz-border-radius-topright: 0; | |
| 2563 border-top-right-radius: 0; | |
| 2564 } | |
| 2565 .kd-slider-discrete.kd-slider-range .kd-sliderhandle-min:before { | |
| 2566 border-width:8px 0 0 8px; | |
| 2567 } | |
| 2568 .kd-slider-discrete.kd-slider-range .kd-sliderhandle-min .kd-sliderhandle-inner { | |
| 2569 -webkit-border-top-right-radius: 0; | |
| 2570 -moz-border-radius-topright: 0; | |
| 2571 border-top-right-radius: 0; | |
| 2572 } | |
| 2573 .kd-slider-discrete.kd-slider-range .kd-sliderhandle-min .kd-sliderhandle-inner: before { | |
| 2574 border-width:6px 0 0 6px; | |
| 2575 } | |
| 2576 .kd-slider-discrete.kd-slider-range .kd-sliderhandle-max { | |
| 2577 margin-left:0; | |
| 2578 -webkit-border-top-left-radius: 0; | |
| 2579 -moz-border-radius-topleft: 0; | |
| 2580 border-top-left-radius: 0; | |
| 2581 } | |
| 2582 .kd-slider-discrete.kd-slider-range .kd-sliderhandle-max:before { | |
| 2583 border-width:8px 8px 0 0; | |
| 2584 } | |
| 2585 .kd-slider-discrete.kd-slider-range .kd-sliderhandle-max .kd-sliderhandle-inner { | |
| 2586 -webkit-border-top-left-radius: 0; | |
| 2587 -moz-border-radius-topleft: 0; | |
| 2588 border-top-left-radius: 0; | |
| 2589 } | |
| 2590 .kd-slider-discrete.kd-slider-range .kd-sliderhandle-max .kd-sliderhandle-inner: before { | |
| 2591 border-width:6px 6px 0 0; | |
| 2592 } | |
| 2593 | |
| 2594 .kd-slider-discrete .kd-sliderruler { | |
| 2595 position:absolute; | |
| 2596 top:18px; | |
| 2597 left:0; | |
| 2598 width:100%; | |
| 2599 height:18px; | |
| 2600 } | |
| 2601 .kd-slider-discrete .kd-sliderstep { | |
| 2602 display:block; | |
| 2603 position:relative; | |
| 2604 float:left; | |
| 2605 width:9px; | |
| 2606 height:10px; | |
| 2607 padding-top:8px; | |
| 2608 margin-left:12px; | |
| 2609 margin-right:-4px; | |
| 2610 | |
| 2611 text-align:center; | |
| 2612 font-size:12px; | |
| 2613 color:#343434; | |
| 2614 } | |
| 2615 .kd-slider-discrete .kd-sliderstep:first-child { | |
| 2616 margin-left:-4px; | |
| 2617 } | |
| 2618 .kd-slider-discrete .kd-sliderstep:before { | |
| 2619 content:""; | |
| 2620 display:block; | |
| 2621 position:absolute; | |
| 2622 top:0; | |
| 2623 left:4px; | |
| 2624 width:1px; | |
| 2625 height:5px; | |
| 2626 | |
| 2627 background:#d0d0d0; | |
| 2628 } | |
| 2629 .kd-slider-discrete .kd-sliderstep-minor { | |
| 2630 text-indent:-9999px; | |
| 2631 } | |
| 2632 .kd-slider-discrete .kd-sliderstep-minor:before { | |
| 2633 height:2px; | |
| 2634 } | |
| 2635 | |
| 2636 /*------------------------------------------------------------------ | |
| 2637 Component: Checkboxes and Radio buttons | |
| 2638 ------------------------------------------------------------------*/ | |
| 2639 input[type=checkbox], input[type=radio], .fakecheckbox, .fakeradio{ | |
| 2640 -webkit-appearance: none; | |
| 2641 width: 13px; | |
| 2642 height: 13px; | |
| 2643 border: 1px solid #C6C6C6; | |
| 2644 margin:0; | |
| 2645 -webkit-border-radius:1px; | |
| 2646 -moz-border-radius:1px; | |
| 2647 border-radius:1px; | |
| 2648 -webkit-box-sizing: border-box; | |
| 2649 -moz-box-sizing: border-box; | |
| 2650 box-sizing: border-box; | |
| 2651 cursor:default; | |
| 2652 position:relative; | |
| 2653 } | |
| 2654 input[type=checkbox]:active, input[type=radio]:active, .fakecheckbox:active, .fa keradio:active{ | |
| 2655 border-color:#666; | |
| 2656 background:#ebebeb; | |
| 2657 } | |
| 2658 input[type=checkbox]:hover, input[type=radio]:hover, .fakecheckbox:hover, .faker adio:hover{ | |
| 2659 border-color:#666; | |
| 2660 -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1); | |
| 2661 -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1); | |
| 2662 box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1); | |
| 2663 } | |
| 2664 input[type=radio], .fakeradio{ | |
| 2665 border-radius:50%; | |
| 2666 width: 15px; | |
| 2667 height: 15px; | |
| 2668 } | |
| 2669 | |
| 2670 input[type=checkbox].disabled, input[type=radio].disabled, .fakecheckbox.disable d, .fakeradio.disabled{ | |
| 2671 border-color:#f1f1f1; | |
| 2672 background:#FFF; | |
| 2673 -webkit-box-shadow: none; | |
| 2674 -moz-box-shadow: none; | |
| 2675 box-shadow: none; | |
| 2676 } | |
| 2677 .disabledtext{ | |
| 2678 color:#B8B8B8; | |
| 2679 } | |
| 2680 | |
| 2681 input[type=radio]:checked::after, .fakeradio.checked::after{ | |
| 2682 content:''; | |
| 2683 display:block; | |
| 2684 position:relative; | |
| 2685 top:3px; | |
| 2686 left:3px; | |
| 2687 width:7px; | |
| 2688 height:7px; | |
| 2689 background:#666; | |
| 2690 border-radius:50%; | |
| 2691 } | |
| 2692 | |
| 2693 input[type=checkbox]:checked::after, .fakecheckbox.checked::after { | |
| 2694 content:url('../images/check_no_box.png'); | |
| 2695 display:block; | |
| 2696 position:absolute; | |
| 2697 top:-6px; | |
| 2698 left:-5px; | |
| 2699 } | |
| 2700 | |
| 2701 input[type=checkbox]:focus, .fakecheckbox.focus { | |
| 2702 outline: none; | |
| 2703 border-color:#4d90fe; | |
| 2704 } | |
| 2705 .fakecheckbox, .fakeradio{ | |
| 2706 display:inline-block; | |
| 2707 } | |
| 2708 | |
| 2709 /*------------------------------------------------------------------ | |
| 2710 Component: Menus | |
| 2711 ------------------------------------------------------------------*/ | |
| 2712 .kd-menulist { | |
| 2713 background: #FFF; | |
| 2714 /* border:1px solid #CCC;/*THIS SHOULD BE USED IN NON-WEBKIT BROWSERS ONLY - OTHER BROWSERS DO NOT INTERPRET THE OUTLINE STYLE CORRECTLY*/ | |
| 2715 outline:1px solid rgba(0,0,0,0.2); | |
| 2716 padding:0 0 6px; | |
| 2717 white-space: nowrap; | |
| 2718 -moz-transition: opacity 0.218s; | |
| 2719 -o-transition: opacity 0.218s; | |
| 2720 -webkit-transition: opacity 0.218s; | |
| 2721 transition: opacity 0.218s; | |
| 2722 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 2723 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 2724 box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| 2725 } | |
| 2726 .kd-menulist-bubble { | |
| 2727 margin-top:11px; | |
| 2728 padding-top:6px; | |
| 2729 } | |
| 2730 .kd-menulist-bubble:after{ | |
| 2731 content:""; | |
| 2732 outline: none; | |
| 2733 display: block; | |
| 2734 position: absolute; | |
| 2735 top: -11px; | |
| 2736 left: 24px; | |
| 2737 margin: 0 0 0 -5px; | |
| 2738 width: 17px; | |
| 2739 height: 11px; | |
| 2740 | |
| 2741 } | |
| 2742 .kd-menulistitem { | |
| 2743 display: block; | |
| 2744 padding: 6px 44px 6px 16px; | |
| 2745 position: relative; | |
| 2746 color: #333; | |
| 2747 font-size:13px; | |
| 2748 font-weight:normal; | |
| 2749 cursor: default; | |
| 2750 margin: 0; | |
| 2751 } | |
| 2752 .kd-menuchecklistitem { | |
| 2753 padding-left: 30px; | |
| 2754 } | |
| 2755 | |
| 2756 .kd-shortcutitem{ | |
| 2757 padding-right:72px; | |
| 2758 } | |
| 2759 | |
| 2760 .kd-shortcut{ | |
| 2761 position:absolute; | |
| 2762 right:16px; | |
| 2763 text-align:right; | |
| 2764 color:#CCC; | |
| 2765 } | |
| 2766 | |
| 2767 .kd-menulistitem.kd-menuchecklistitem.selected { | |
| 2768 background-position: left center; | |
| 2769 background-repeat: no-repeat; | |
| 2770 background-color: #FFF; | |
| 2771 } | |
| 2772 .kd-menulistitem.kd-menuchecklistitem.selected:hover { | |
| 2773 background-color: #EEE; | |
| 2774 } | |
| 2775 .kd-menulistitem.disabled, .kd-menulistitem.disabled:hover, .kd-menulistitem.dis abled { | |
| 2776 color: #ccc; | |
| 2777 background-color: #FFF; | |
| 2778 cursor: default; | |
| 2779 } | |
| 2780 | |
| 2781 .kd-menulist .kd-flyout { | |
| 2782 position: absolute; | |
| 2783 left: 100%; | |
| 2784 top: 0; | |
| 2785 width: 1px; | |
| 2786 overflow: hidden; | |
| 2787 opacity: 0.0; | |
| 2788 -moz-opacity: 0.0; | |
| 2789 filter: alpha(opacity=00); | |
| 2790 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)"; | |
| 2791 /* -moz-transition: opacity 0.218s; | |
| 2792 -o-transition: opacity 0.218s; | |
| 2793 -webkit-transition: opacity 0.218s; | |
| 2794 transition: opacity 0.218s;*/ | |
| 2795 } | |
| 2796 | |
| 2797 .kd-menulistitem:hover .kd-flyout { | |
| 2798 width: auto; | |
| 2799 overflow: visible; | |
| 2800 opacity: 1.0; | |
| 2801 -moz-opacity: 1.0; | |
| 2802 filter: alpha(opacity=100); | |
| 2803 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| 2804 -moz-transition: opacity 0s; | |
| 2805 -webkit-transition: opacity 0s; | |
| 2806 transition: opacity 0s; | |
| 2807 -moz-transition-delay:0.130s; | |
| 2808 -webkit-transition-delay:0.130s; | |
| 2809 transition-delay:0.130s; | |
| 2810 } | |
| 2811 | |
| 2812 .kd-menulistitem .kd-disclosureindicator { | |
| 2813 position: absolute; | |
| 2814 right: 10px; | |
| 2815 top: 50%; | |
| 2816 margin-top: -3px; | |
| 2817 opacity: .5; | |
| 2818 } | |
| 2819 | |
| 2820 .kd-menulistitem:hover, .kd-menulistitem.selected { | |
| 2821 background-color: #f1f1f1; | |
| 2822 color: #222; | |
| 2823 | |
| 2824 -moz-transition: background 0s; | |
| 2825 -o-transition: background 0s; | |
| 2826 -webkit-transition: background 0s; | |
| 2827 transition: background 0s; | |
| 2828 } | |
| 2829 .kd-menulistitem:hover .kd-disclosureindicator { | |
| 2830 border-left-color: #999; | |
| 2831 opacity: 1; | |
| 2832 -webkit-transition: none; | |
| 2833 -moz-transition: none; | |
| 2834 transition: none; | |
| 2835 } | |
| 2836 .kd-menurule { | |
| 2837 border-top: 1px solid #ebebeb; | |
| 2838 margin-top: 9px; | |
| 2839 margin-bottom: 10px; | |
| 2840 } | |
| 2841 | |
| 2842 /*------------------------------------------------------------------ | |
| 2843 Component: Menu Button | |
| 2844 ------------------------------------------------------------------*/ | |
| 2845 .kd-menubutton .kd-menulist { | |
| 2846 text-align: left; | |
| 2847 position: absolute; | |
| 2848 z-index: 99; | |
| 2849 background: #FFF; | |
| 2850 height: 0; | |
| 2851 width:auto; | |
| 2852 left:-9999px; | |
| 2853 /*overflow: hidden;*/ | |
| 2854 | |
| 2855 -moz-transition: 0; | |
| 2856 -o-transition: 0; | |
| 2857 -webkit-transition: 0; | |
| 2858 transition: 0; | |
| 2859 | |
| 2860 opacity: 0.0; | |
| 2861 -moz-opacity: 0.0; | |
| 2862 filter: alpha(opacity=00); | |
| 2863 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)"; | |
| 2864 } | |
| 2865 .kd-menubutton .kd-menulist.shown { | |
| 2866 left:0; | |
| 2867 height: auto; | |
| 2868 opacity: 1.0; | |
| 2869 -moz-opacity: 1.0; | |
| 2870 filter: alpha(opacity=100); | |
| 2871 -moz-transition: 0; | |
| 2872 -o-transition: 0; | |
| 2873 -webkit-transition: 0; | |
| 2874 transition: 0; | |
| 2875 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| 2876 } | |
| 2877 .kd-menubutton .kd-menulist.scroll.shown { | |
| 2878 max-height: 174px; | |
| 2879 overflow: auto; | |
| 2880 } | |
| 2881 | |
| 2882 /*------------------------------------------------------------------ | |
| 2883 Component: Modal Dialog | |
| 2884 ------------------------------------------------------------------*/ | |
| 2885 #kd-modalshield { | |
| 2886 background: #FFF; | |
| 2887 position: fixed; | |
| 2888 left: 0; | |
| 2889 right: 0; | |
| 2890 bottom: 0; | |
| 2891 z-index: 99; | |
| 2892 opacity: 0.0; | |
| 2893 opacity: 0.0; | |
| 2894 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)"; | |
| 2895 filter: alpha(opacity=00); | |
| 2896 -webkit-transition: all 0.218s; | |
| 2897 -moz-transition: all 0.218s; | |
| 2898 -o-transition: all 0.218s; | |
| 2899 transition: all 0.218s; | |
| 2900 } | |
| 2901 html.x-mobile #kd-modalshield { | |
| 2902 display: none; | |
| 2903 } | |
| 2904 html.x-mobile #kd-modaldialog { | |
| 2905 display: none; | |
| 2906 } | |
| 2907 body.strawman #kd-modalshield { | |
| 2908 top: 44px; | |
| 2909 } | |
| 2910 body.kd-compact #kd-modalshield { | |
| 2911 top: 72px; | |
| 2912 } | |
| 2913 html.y-expand #kd-modalshield { | |
| 2914 top: 80px; | |
| 2915 } | |
| 2916 #kd-modalshield.visible { | |
| 2917 opacity: .75; | |
| 2918 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; | |
| 2919 filter: alpha(opacity=75); | |
| 2920 opacity: .75; | |
| 2921 } | |
| 2922 .kd-modaldialog.visible { | |
| 2923 opacity: 1.0; | |
| 2924 -webkit-transform: scale(1.0); | |
| 2925 -moz-transform: scale(1.0); | |
| 2926 transform: scale(1.0); | |
| 2927 } | |
| 2928 .kd-modaldialog { | |
| 2929 -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.2); | |
| 2930 -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.2); | |
| 2931 -ms-box-shadow: 0 4px 16px rgba(0,0,0,0.2); | |
| 2932 box-shadow: 0 4px 16px rgba(0,0,0,0.2); | |
| 2933 background: white; | |
| 2934 left: 50%; | |
| 2935 outline:1px solid rgba(0,0,0,0.2);/* border:1px solid #CCC;/*THIS IS FOR NON -WEBKIT BROWSERS ONLY - OTHER BROWSERS DO NOT INTERPRET THE OUTLINE STYLE CORREC TLY*/ | |
| 2936 padding:30px 42px; | |
| 2937 position: fixed; | |
| 2938 right: auto; | |
| 2939 width: 512px; | |
| 2940 height: auto; | |
| 2941 overflow: hidden; | |
| 2942 z-index: 100; | |
| 2943 top: 72px; | |
| 2944 margin-left: -256px; | |
| 2945 opacity: 0.0; | |
| 2946 -webkit-transform: scale(1.05); | |
| 2947 -moz-transform: scale(1.05); | |
| 2948 transform: scale(1.05); | |
| 2949 -webkit-transition: all 0.218s; | |
| 2950 -moz-transition: all 0.218s; | |
| 2951 transition: all 0.218s; | |
| 2952 } | |
| 2953 .kd-modaldialog.medium { | |
| 2954 padding:28px 32px; | |
| 2955 | |
| 2956 width: 384px; | |
| 2957 } | |
| 2958 .kd-modaldialog.small { | |
| 2959 padding:16px 20px; | |
| 2960 | |
| 2961 width: 256px; | |
| 2962 } | |
| 2963 .kd-modaldialog h1 { | |
| 2964 margin-bottom: 1em; | |
| 2965 } | |
| 2966 | |
| 2967 .kd-modaldialog.small h1 { | |
| 2968 margin-bottom: 8px; | |
| 2969 } | |
| 2970 .kd-formbuttons{ | |
| 2971 margin-top:16px; | |
| 2972 } | |
| 2973 .kd-formbuttons .kd-button.primary{ | |
| 2974 float:left; | |
| 2975 margin-right:16px; | |
| 2976 } | |
| 2977 .kd-modaldialog .kd-confirmation { | |
| 2978 display: inline-block; | |
| 2979 padding-top: 7px; | |
| 2980 } | |
| 2981 .kd-modaldialog input[type=checkbox] { | |
| 2982 margin-left: 0; | |
| 2983 margin-right: 6px; | |
| 2984 margin-bottom: -1px; | |
| 2985 } | |
| 2986 .kd-closebutton { | |
| 2987 width: 44px; | |
| 2988 height: 44px; | |
| 2989 background: url('../images/icons/x.png') center no-repeat; | |
| 2990 position: absolute; | |
| 2991 top: 0; | |
| 2992 right: 0; | |
| 2993 opacity: .7; | |
| 2994 -moz-opacity: .7; | |
| 2995 filter: alpha(opacity=70); | |
| 2996 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; | |
| 2997 cursor:default; | |
| 2998 } | |
| 2999 .kd-closebutton:hover { | |
| 3000 opacity: 1; | |
| 3001 -moz-opacity: 1; | |
| 3002 filter: alpha(opacity=100); | |
| 3003 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| 3004 } | |
| 3005 | |
| 3006 /*------------------------------------------------------------------ | |
| 3007 Component: Prompt | |
| 3008 ------------------------------------------------------------------*/ | |
| 3009 .kd-prompt label { | |
| 3010 display: block; | |
| 3011 margin-bottom: 16px; | |
| 3012 } | |
| 3013 .kd-prompt input[type=text] { | |
| 3014 width: 100%; | |
| 3015 } | |
| 3016 | |
| 3017 /*------------------------------------------------------------------ | |
| 3018 Component: Settings | |
| 3019 ------------------------------------------------------------------*/ | |
| 3020 .kd-settings { | |
| 3021 -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.2); | |
| 3022 -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.2); | |
| 3023 -ms-box-shadow: 0 4px 16px rgba(0,0,0,0.2); | |
| 3024 box-shadow: 0 4px 16px rgba(0,0,0,0.2); | |
| 3025 background: white; | |
| 3026 left: 50%; | |
| 3027 outline:1px solid rgba(0,0,0,0.2);/* border:1px solid #CCC;/*THIS IS FOR NON -WEBKIT BROWSERS ONLY - OTHER BROWSERS DO NOT INTERPRET THE OUTLINE STYLE CORREC TLY*/ | |
| 3028 position: fixed; | |
| 3029 right: auto; | |
| 3030 width: 800px; | |
| 3031 height: auto; | |
| 3032 overflow: hidden; | |
| 3033 z-index: 100; | |
| 3034 top: 72px; | |
| 3035 margin-left: -256px; | |
| 3036 opacity: 0.0; | |
| 3037 -webkit-transform: scale(1.05); | |
| 3038 -moz-transform: scale(1.05); | |
| 3039 transform: scale(1.05); | |
| 3040 -webkit-transition: all 0.218s; | |
| 3041 -moz-transition: all 0.218s; | |
| 3042 transition: all 0.218s; | |
| 3043 } | |
| 3044 .kd-settings.visible { | |
| 3045 opacity: 1.0; | |
| 3046 -webkit-transform: scale(1.0); | |
| 3047 -moz-transform: scale(1.0); | |
| 3048 transform: scale(1.0); | |
| 3049 } | |
| 3050 .kd-settings-hd { | |
| 3051 background-color: #f1f1f1; | |
| 3052 border-bottom: 1px solid #ccc; | |
| 3053 height: 71px; | |
| 3054 } | |
| 3055 .kd-settings-hd h1 { | |
| 3056 padding-top: 26px; | |
| 3057 padding-left: 42px; | |
| 3058 } | |
| 3059 .kd-settings-hd .kd-formbuttons { | |
| 3060 float: right; | |
| 3061 padding-right: 26px; | |
| 3062 padding-top: 22px; | |
| 3063 margin: 0; | |
| 3064 } | |
| 3065 .kd-settings-nav { | |
| 3066 padding: 36px 20px 36px 42px; | |
| 3067 border-right: 1px solid #ebebeb; | |
| 3068 width: 108px; | |
| 3069 float: left; | |
| 3070 overflow: auto; | |
| 3071 } | |
| 3072 .kd-settings-nav li { | |
| 3073 margin-bottom: 13px; | |
| 3074 } | |
| 3075 .kd-settings-nav li a { | |
| 3076 display: block; | |
| 3077 color: #333; | |
| 3078 cursor: default; | |
| 3079 } | |
| 3080 .kd-settings-nav li a:hover { | |
| 3081 color: #111; | |
| 3082 } | |
| 3083 .kd-settings-nav li a.selected { | |
| 3084 color: #DD4B39; | |
| 3085 font-weight: bold; | |
| 3086 } | |
| 3087 .kd-settings-content { | |
| 3088 width: 629px; | |
| 3089 margin-left: 171px; | |
| 3090 height: auto; | |
| 3091 overflow: hidden; | |
| 3092 padding-bottom: 20px; | |
| 3093 } | |
| 3094 .kd-settings-content .kd-settings-pane { | |
| 3095 display: none; | |
| 3096 padding: 16px 32px; | |
| 3097 height: auto; | |
| 3098 max-height: 400px; | |
| 3099 overflow: auto; | |
| 3100 } | |
| 3101 .kd-settings-content .kd-settings-pane.selected { | |
| 3102 display: block; | |
| 3103 } | |
| 3104 | |
| 3105 .kd-settings-pane-section { | |
| 3106 clear: both; | |
| 3107 border-bottom: 1px solid #ebebeb; | |
| 3108 padding: 20px 0; | |
| 3109 height: 100%; | |
| 3110 overflow: hidden; | |
| 3111 } | |
| 3112 .kd-settings-pane-section p { | |
| 3113 line-height: 13px; | |
| 3114 } | |
| 3115 .kd-settings-pane-section .setting-label { | |
| 3116 display: block; | |
| 3117 width: 185px; | |
| 3118 float: left; | |
| 3119 font-weight: bold; | |
| 3120 } | |
| 3121 .kd-settings-pane-section .setting-label .info { | |
| 3122 font-size: 11px; | |
| 3123 color: #666; | |
| 3124 font-weight: normal; | |
| 3125 } | |
| 3126 .kd-settings-pane-section .setting { | |
| 3127 margin-left: 210px; | |
| 3128 } | |
| 3129 .kd-settings-pane-section .kd-button.kd-select { | |
| 3130 float: none; | |
| 3131 margin-left: 0; | |
| 3132 min-width: 0; | |
| 3133 margin-right: 5px; | |
| 3134 } | |
| 3135 | |
| 3136 .kd-settings-pane-section .setting input[type=checkbox] { | |
| 3137 margin-right: 5px; | |
| 3138 bottom: -1px; | |
| 3139 } | |
| 3140 | |
| 3141 /*------------------------------------------------------------------ | |
| 3142 Component: Bubble Panel | |
| 3143 ------------------------------------------------------------------*/ | |
| 3144 .kd-bubble { | |
| 3145 position: relative; | |
| 3146 background: #FFF; | |
| 3147 outline: 1px solid rgba(0,0,0,0.2); | |
| 3148 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 3149 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 3150 box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| 3151 padding: 16px; | |
| 3152 width: 146px; | |
| 3153 -webkit-border-radius: 2px; | |
| 3154 -moz-border-radius: 2px; | |
| 3155 border-radius: 2px; | |
| 3156 } | |
| 3157 .kd-bubble .pointer { | |
| 3158 outline: none; | |
| 3159 display: block; | |
| 3160 position: absolute; | |
| 3161 top: -11px; | |
| 3162 left: 24px; | |
| 3163 margin: 0 0 0 -5px; | |
| 3164 width: 17px; | |
| 3165 height: 11px; | |
| 3166 } | |
| 3167 | |
| 3168 .kd-bubble p { | |
| 3169 margin-bottom: 0; | |
| 3170 color: #666; | |
| 3171 } | |
| 3172 | |
| 3173 .kd-bubble p.links { | |
| 3174 margin-top: 10px; | |
| 3175 } | |
| 3176 .kd-bubble p.links a:hover{ | |
| 3177 text-decoration:underline; | |
| 3178 } | |
| 3179 | |
| 3180 .kd-bubble.alert{ | |
| 3181 background: #F9EDBE; | |
| 3182 outline: 1px solid #f0c36d; | |
| 3183 } | |
| 3184 | |
| 3185 .kd-profilebox{ | |
| 3186 width:336px; | |
| 3187 } | |
| 3188 .kd-profilebox .kd-disclaimer{ | |
| 3189 background:#F9EDBE; | |
| 3190 padding:16px; | |
| 3191 margin:-16px -16px 0 -16px; | |
| 3192 border-bottom:1px solid #ddd8c0; | |
| 3193 } | |
| 3194 .kd-profilebox .kd-disclaimer p{ | |
| 3195 color:#202020; | |
| 3196 } | |
| 3197 .kd-profile{ | |
| 3198 padding:22px 0; | |
| 3199 height:100%; | |
| 3200 overflow:hidden; | |
| 3201 } | |
| 3202 .kd-profileimage{ | |
| 3203 float:left; | |
| 3204 width:160px; | |
| 3205 } | |
| 3206 .kd-profileimage img{ | |
| 3207 border:1px solid #CCC; | |
| 3208 } | |
| 3209 .kd-profileinfo{ | |
| 3210 float:right; | |
| 3211 width:160px; | |
| 3212 } | |
| 3213 .kd-profileinfo .email{ | |
| 3214 color:#999; | |
| 3215 } | |
| 3216 .kd-profileinfo ul{ | |
| 3217 margin-top:6px; | |
| 3218 } | |
| 3219 .kd-profileinfo ul li{ | |
| 3220 line-height:24px; | |
| 3221 } | |
| 3222 .kd-profileinfo .kd-profilename{ | |
| 3223 font-size:13px; | |
| 3224 line-height:13px; | |
| 3225 color:#202020; | |
| 3226 font-weight:bold; | |
| 3227 } | |
| 3228 .kd-accountlist{ | |
| 3229 background:#f1f1f1; | |
| 3230 padding:3px 16px 0; | |
| 3231 margin:0 -16px 0; | |
| 3232 border-top:1px solid #CCC; | |
| 3233 -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 3234 -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 3235 box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); | |
| 3236 } | |
| 3237 .kd-accountlist h3{ | |
| 3238 font-size:13px; | |
| 3239 font-weight:bold; | |
| 3240 } | |
| 3241 .kd-accountlist img{ | |
| 3242 border:1px solid #CCC; | |
| 3243 position:absolute; | |
| 3244 left:0; | |
| 3245 top:2px; | |
| 3246 } | |
| 3247 .kd-accountlist ul{ | |
| 3248 margin-top:3px; | |
| 3249 } | |
| 3250 .kd-accountlist ul li{ | |
| 3251 height:44px; | |
| 3252 position:relative; | |
| 3253 } | |
| 3254 .kd-accountlist ul li p{ | |
| 3255 margin-left:44px; | |
| 3256 } | |
| 3257 .kd-bubble .bottomlinks{ | |
| 3258 margin:0 -16px; | |
| 3259 padding:16px 16px 0; | |
| 3260 border-top:1px solid #CCC; | |
| 3261 } | |
| 3262 .kd-bubble .bottomlinks a{ | |
| 3263 float:right; | |
| 3264 } | |
| 3265 .kd-bubble .bottomlinks a:first-child{ | |
| 3266 float:left; | |
| 3267 } | |
| 3268 #stickers .kd-bubble{ | |
| 3269 margin-right:44px; | |
| 3270 float:left; | |
| 3271 } | |
| 3272 .kd-bubble.dark{background:#2d2d2d;width:auto;outline: 1px solid rgba(255,255,25 5,0.5);} | |
| 3273 .kd-bubble.dark ul{height:100%; overflow:hidden;} | |
| 3274 .kd-bubble.dark li{float:left; margin-left:16px;} | |
| 3275 .kd-bubble.dark li img{display:block;} | |
| 3276 .kd-bubble.dark li:first-child{margin-left:0;} | |
| 3277 | |
| 3278 /*------------------------------------------------------------------ | |
| 3279 Component: Hovercard | |
| 3280 ------------------------------------------------------------------*/ | |
| 3281 .kd-hovercard { | |
| 3282 outline:1px solid rgba(0,0,0,0.2); | |
| 3283 width: 160px; | |
| 3284 -moz-transition: opacity 0.218s; | |
| 3285 -o-transition: opacity 0.218s; | |
| 3286 -webkit-transition: opacity 0.218s; | |
| 3287 transition: opacity 0.218s; | |
| 3288 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 3289 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 3290 box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| 3291 } | |
| 3292 | |
| 3293 .kd-hovercard .kd-cardprofile { | |
| 3294 padding: 16px 16px 0; | |
| 3295 border-bottom: 1px solid #ebebeb; | |
| 3296 } | |
| 3297 | |
| 3298 .kd-hovercard .kd-menulist { | |
| 3299 outline: 0; | |
| 3300 width: auto; | |
| 3301 -moz-transition: none; | |
| 3302 -o-transition: none; | |
| 3303 -webkit-transition: none; | |
| 3304 transition: none; | |
| 3305 -webkit-box-shadow: 0; | |
| 3306 -moz-box-shadow: 0; | |
| 3307 box-shadow: 0; | |
| 3308 } | |
| 3309 | |
| 3310 /*------------------------------------------------------------------ | |
| 3311 Component: Date Picker | |
| 3312 ------------------------------------------------------------------*/ | |
| 3313 .kd-datepicker{ | |
| 3314 padding:16px; | |
| 3315 outline: 1px solid rgba(0,0,0,0.2); | |
| 3316 opacity:0; | |
| 3317 width:144px; | |
| 3318 position:absolute; | |
| 3319 left:-9999px; | |
| 3320 z-index:3; | |
| 3321 background:#FFF; | |
| 3322 | |
| 3323 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 3324 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 3325 box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| 3326 -webkit-border-radius: 2px; | |
| 3327 -moz-border-radius: 2px; | |
| 3328 border-radius: 2px; | |
| 3329 -webkit-transition: all 0.13s linear, left 0 linear .13s; | |
| 3330 -moz-transition: all 0.13s linear; | |
| 3331 -o-transition: all 0.13s linear; | |
| 3332 transition: all 0.13s linear; | |
| 3333 } | |
| 3334 .kd-minicalendar{ | |
| 3335 width:148px; | |
| 3336 margin-left:-4px; | |
| 3337 } | |
| 3338 .kd-datepicker .kd-minicalendar{ | |
| 3339 width:144px; | |
| 3340 margin:0; | |
| 3341 | |
| 3342 } | |
| 3343 .kd-datepicker.shown{ | |
| 3344 opacity:1; | |
| 3345 -webkit-transition:0, left 0 linear 0; | |
| 3346 -moz-transition:0 | |
| 3347 -o-transition:0; | |
| 3348 transition:0; | |
| 3349 } | |
| 3350 .kd-minicalendar h2{ | |
| 3351 font-size:13px; | |
| 3352 color:#666; | |
| 3353 padding-left:4px; | |
| 3354 } | |
| 3355 .kd-minicalendar h2 .links{ | |
| 3356 float:right; | |
| 3357 margin-right:2px; | |
| 3358 } | |
| 3359 .kd-minicalendar h2 .links img{ | |
| 3360 cursor:default; | |
| 3361 } | |
| 3362 .kd-minicalendar td, .kd-minicalendar th{ | |
| 3363 width:20px; | |
| 3364 height:20px; | |
| 3365 line-height:20px; | |
| 3366 padding-left:4px; | |
| 3367 font-size:11px; | |
| 3368 color:#666; | |
| 3369 cursor:default; | |
| 3370 } | |
| 3371 .kd-minicalendar td:hover, .kd-minicalendar td.selected, .kd-minicalendar h2 .li nks img:hover{ | |
| 3372 background:#eee; | |
| 3373 color:#333; | |
| 3374 } | |
| 3375 | |
| 3376 .kd-minicalendar td.disabled{ | |
| 3377 color:#ccc; | |
| 3378 } | |
| 3379 .kd-minicalendar td.disabled:hover{ | |
| 3380 background:none; | |
| 3381 cursor:default; | |
| 3382 } | |
| 3383 | |
| 3384 /*------------------------------------------------------------------ | |
| 3385 Component: Color Picker | |
| 3386 ------------------------------------------------------------------*/ | |
| 3387 .kd-colorpicker{ | |
| 3388 width:140px; | |
| 3389 padding:16px; | |
| 3390 outline: 1px solid rgba(0,0,0,0.2); | |
| 3391 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 3392 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); | |
| 3393 box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| 3394 -webkit-border-radius: 2px; | |
| 3395 -moz-border-radius: 2px; | |
| 3396 border-radius: 2px; | |
| 3397 } | |
| 3398 .kd-menubutton .kd-colorpicker{ | |
| 3399 padding:0; | |
| 3400 } | |
| 3401 .kd-menubutton.selected .kd-colorpicker{ | |
| 3402 padding:16px; | |
| 3403 } | |
| 3404 .kd-colortable{ | |
| 3405 width:140px; | |
| 3406 } | |
| 3407 .kd-colortable.primaries{ | |
| 3408 margin-bottom:8px; | |
| 3409 } | |
| 3410 .kd-colortable td{ | |
| 3411 width:16px; | |
| 3412 height:16px; | |
| 3413 border:1px solid #FFF; | |
| 3414 cursor:default; | |
| 3415 position:relative; | |
| 3416 } | |
| 3417 .kd-colortable td:hover{ | |
| 3418 border-color:#333; | |
| 3419 } | |
| 3420 .kd-colortable td.selected:after{ | |
| 3421 content:''; | |
| 3422 display:block; | |
| 3423 position:absolute; | |
| 3424 top:-3px; | |
| 3425 right:0; | |
| 3426 width:18px; | |
| 3427 height:18px; | |
| 3428 } | |
| 3429 | |
| 3430 /*------------------------------------------------------------------ | |
| 3431 Component: Activity Indicator | |
| 3432 ------------------------------------------------------------------*/ | |
| 3433 #loader { | |
| 3434 position:relative; | |
| 3435 width:19px; | |
| 3436 height:19px; | |
| 3437 } | |
| 3438 #loader * { | |
| 3439 display:block; | |
| 3440 position:absolute; | |
| 3441 } | |
| 3442 #loader .circle { | |
| 3443 width:100%; | |
| 3444 height:100%; | |
| 3445 -webkit-border-radius:50%; | |
| 3446 -moz-border-radius:50%; | |
| 3447 border-radius:50%; | |
| 3448 opacity:0; | |
| 3449 overflow:hidden; | |
| 3450 } | |
| 3451 | |
| 3452 #loader .mask { | |
| 3453 height:100%; | |
| 3454 width:100%; | |
| 3455 opacity:0; | |
| 3456 overflow:hidden; | |
| 3457 } | |
| 3458 | |
| 3459 #loader .mask.first { | |
| 3460 -webkit-transition-property:border-color; | |
| 3461 -webkit-transition-duration:0s; | |
| 3462 -webkit-transition-delay:0.22s; | |
| 3463 -moz-transition-property:border-color; | |
| 3464 -moz-transition-duration:0s; | |
| 3465 -moz-transition-delay:0.22s; | |
| 3466 transition-property:border-color; | |
| 3467 transition-duration:0s; | |
| 3468 transition-delay:0.22s; | |
| 3469 } | |
| 3470 | |
| 3471 #loader .circle.initial .mask { top:0; height:50%; } | |
| 3472 | |
| 3473 #loader .circle.red .mask.first { top:0; height:50%; border-bottom:1px solid #55 5; } | |
| 3474 #loader .circle.red .mask.second { bottom:0; height:50%; } | |
| 3475 | |
| 3476 #loader .circle.yellow .mask.first { right:0; width:50%; border-left:1px solid # 888; } | |
| 3477 #loader .circle.yellow .mask.second { left:0; width:50%; } | |
| 3478 | |
| 3479 #loader .circle.green .mask.first { bottom:0; height:50%; border-top:1px solid # 555; } | |
| 3480 #loader .circle.green .mask.second { top:0; height:50%; } | |
| 3481 | |
| 3482 #loader .circle.blue .mask.first { left:0; width:50%; border-right:1px solid #88 8;} | |
| 3483 #loader .circle.blue .mask.second { right:0; width:50%; } | |
| 3484 | |
| 3485 #loader .circle .mask .base { | |
| 3486 height:100%; | |
| 3487 width:100%; | |
| 3488 opacity:0; | |
| 3489 -webkit-border-radius:50%; | |
| 3490 -moz-border-radius:50%; | |
| 3491 border-radius:50%; | |
| 3492 -webkit-transition-property:opacity; | |
| 3493 -webkit-transition-timing-function:linear; | |
| 3494 -webkit-transition-duration:0s; | |
| 3495 -webkit-transition-delay:0s; | |
| 3496 -moz-transition-property:opacity; | |
| 3497 -moz-transition-timing-function:linear; | |
| 3498 -moz-transition-duration:0s; | |
| 3499 -moz-transition-delay:0s; | |
| 3500 transition-property:opacity; | |
| 3501 transition-timing-function:linear; | |
| 3502 transition-duration:0s; | |
| 3503 transition-delay:0s; | |
| 3504 } | |
| 3505 | |
| 3506 #loader .circle .mask .mover { | |
| 3507 height:100%; | |
| 3508 width:100%; | |
| 3509 -webkit-border-radius:50%; | |
| 3510 -moz-border-radius:50%; | |
| 3511 border-radius:50%; | |
| 3512 -webkit-transition-property:background-color, left, top, right, bottom, widt h, height; | |
| 3513 -webkit-transition-timing-function:ease-in; | |
| 3514 -webkit-transition-duration:0.22s; | |
| 3515 -webkit-transition-delay:0s; | |
| 3516 -moz-transition-property:background-color, left, top, right, bottom, width, height; | |
| 3517 -moz-transition-timing-function:ease-in; | |
| 3518 -moz-transition-duration:0.22s; | |
| 3519 -moz-transition-delay:0s; | |
| 3520 transition-property:background-color, left, top, right, bottom, width, heigh t; | |
| 3521 transition-timing-function:ease-in; | |
| 3522 transition-duration:0.22s; | |
| 3523 transition-delay:0s; | |
| 3524 } | |
| 3525 #loader .circle .mask.second .mover, | |
| 3526 #loader .circle.initial .mask .mover { | |
| 3527 -webkit-transition-timing-function:ease-out; | |
| 3528 -webkit-transition-delay:0.22s; | |
| 3529 -moz-transition-timing-function:ease-out; | |
| 3530 -moz-transition-delay:0.22s; | |
| 3531 transition-timing-function:ease-out; | |
| 3532 transition-delay:0.22s; | |
| 3533 } | |
| 3534 | |
| 3535 #loader .circle.red .mask.first .base { top:0; height:200%; background-color:#88 8; } | |
| 3536 #loader .circle.red .mask.second .base { bottom:0; height:200%; background-color :#555; } | |
| 3537 | |
| 3538 #loader .circle.yellow .mask.first .base { right:0; width:200%; background-color :#555; } | |
| 3539 #loader .circle.yellow .mask.second .base { left:0; width:200%; background-color :#888; } | |
| 3540 | |
| 3541 #loader .circle.green .mask.first .base { bottom:0; height:200%; background-colo r:#888; } | |
| 3542 #loader .circle.green .mask.second .base { top:0; height:200%; background-color: #555; } | |
| 3543 | |
| 3544 #loader .circle.blue .mask.first .base { left:0; width:200%; background-color:#5 55; } | |
| 3545 #loader .circle.blue .mask.second .base { right:0; width:200%; background-color: #888; } | |
| 3546 | |
| 3547 #loader .circle.initial .mask .mover { | |
| 3548 top:100%; | |
| 3549 height:0; | |
| 3550 background-color:#363636; | |
| 3551 } | |
| 3552 #loader .circle.red .mask.first .mover { top:0; height:200%; background-color:#5 55; } | |
| 3553 #loader .circle.red .mask.second .mover { bottom:100%; height:0; background-colo r:#6a6a6a } | |
| 3554 | |
| 3555 #loader .circle.yellow .mask.first .mover { right:0; width:200%; background-colo r:#888; } | |
| 3556 #loader .circle.yellow .mask.second .mover { left:100%; width:0; background-colo r:#363636; } | |
| 3557 | |
| 3558 #loader .circle.green .mask.first .mover { bottom:0; height:200%; background-col or:#555; } | |
| 3559 #loader .circle.green .mask.second .mover { top:100%; height:0; background-color :#6a6a6a; } | |
| 3560 | |
| 3561 #loader .circle.blue .mask.first .mover { left:0; width:200%; background-color:# 888; } | |
| 3562 #loader .circle.blue .mask.second .mover { right:100%; width:0; background-color :#363636; } | |
| 3563 | |
| 3564 /* Initial State */ | |
| 3565 #loader.initial .circle.initial, | |
| 3566 #loader.initial .circle.initial .mask { | |
| 3567 opacity:1; | |
| 3568 } | |
| 3569 #loader.initial .circle.initial .mask .mover { | |
| 3570 top:0; | |
| 3571 height:200%; | |
| 3572 background-color:#555; | |
| 3573 } | |
| 3574 | |
| 3575 /* Moving from Red to Yellow */ | |
| 3576 #loader.yellow .circle.yellow, | |
| 3577 #loader.yellow .circle.yellow .mask, | |
| 3578 #loader.yellow .circle.yellow .mask .base { | |
| 3579 opacity:1; | |
| 3580 } | |
| 3581 #loader.yellow .circle.yellow .mask.first { | |
| 3582 border-color:#555; | |
| 3583 } | |
| 3584 #loader.yellow .circle.yellow .mask.first .mover { | |
| 3585 right:100%; | |
| 3586 width:0; | |
| 3587 background-color:#6a6a6a; | |
| 3588 } | |
| 3589 #loader.yellow .circle.yellow .mask.second .mover { | |
| 3590 left:0; | |
| 3591 width:200%; | |
| 3592 background-color:#555; | |
| 3593 } | |
| 3594 | |
| 3595 /* Moving from Yellow to Green */ | |
| 3596 #loader.green .circle.green, | |
| 3597 #loader.green .circle.green .mask, | |
| 3598 #loader.green .circle.green .mask .base { | |
| 3599 opacity:1; | |
| 3600 } | |
| 3601 #loader.green .circle.green .mask.first { | |
| 3602 border-color:#888; | |
| 3603 } | |
| 3604 #loader.green .circle.green .mask.first .mover { | |
| 3605 bottom:100%; | |
| 3606 height:0; | |
| 3607 background-color:#363636; | |
| 3608 } | |
| 3609 #loader.green .circle.green .mask.second .mover { | |
| 3610 top:0; | |
| 3611 height:200%; | |
| 3612 background-color:#888; | |
| 3613 } | |
| 3614 | |
| 3615 | |
| 3616 /* Moving from Green to Blue */ | |
| 3617 #loader.blue .circle.blue, | |
| 3618 #loader.blue .circle.blue .mask, | |
| 3619 #loader.blue .circle.blue .mask .base { | |
| 3620 opacity:1; | |
| 3621 } | |
| 3622 #loader.blue .circle.blue .mask.first { | |
| 3623 border-color:#555; | |
| 3624 } | |
| 3625 #loader.blue .circle.blue .mask.first .mover { | |
| 3626 left:100%; | |
| 3627 width:0; | |
| 3628 background-color:#6a6a6a; | |
| 3629 } | |
| 3630 #loader.blue .circle.blue .mask.second .mover { | |
| 3631 right:0; | |
| 3632 width:200%; | |
| 3633 background-color:#555; | |
| 3634 } | |
| 3635 | |
| 3636 /* Moving from Blue to Red */ | |
| 3637 #loader.red .circle.red, | |
| 3638 #loader.red .circle.red .mask, | |
| 3639 #loader.red .circle.red .mask .base { | |
| 3640 opacity:1; | |
| 3641 } | |
| 3642 #loader.red.firstTime .circle.red .mask.second .base { | |
| 3643 opacity:0; | |
| 3644 } | |
| 3645 #loader.red .circle.red .mask.first { | |
| 3646 border-color:#888; | |
| 3647 } | |
| 3648 #loader.red .circle.red .mask.first .mover { | |
| 3649 top:100%; | |
| 3650 height:0; | |
| 3651 background-color:#363636; | |
| 3652 } | |
| 3653 #loader.red .circle.red .mask.second .mover { | |
| 3654 bottom:0; | |
| 3655 height:200%; | |
| 3656 background-color:#888; | |
| 3657 } | |
| 3658 #loader.offline .mask.first .base, | |
| 3659 #loader.offline .mask.second .mover, | |
| 3660 #loader.readyOn .base, | |
| 3661 #loader.readyOn .mover, | |
| 3662 #loader.transitionOn .mask.second .base{ | |
| 3663 background-color:#999 !important; | |
| 3664 } | |
| 3665 #loader.offline .mask.first, | |
| 3666 #loader.readyOn .mask.first{ | |
| 3667 border-color:#999 !important; | |
| 3668 } | |
| 3669 #loader .bolt{ | |
| 3670 position:absolute; | |
| 3671 top:50%; | |
| 3672 left:50%; | |
| 3673 margin-top:-6px; | |
| 3674 margin-left:-3px; | |
| 3675 opacity:0; | |
| 3676 width:8px; | |
| 3677 height:14px; | |
| 3678 | |
| 3679 -webkit-transition: opacity .218s linear .44s; | |
| 3680 -moz-transition: opacity .218s linear .44s; | |
| 3681 -o-transition: opacity .218s linear .44s; | |
| 3682 transition: opacity .218s linear .44s; | |
| 3683 } | |
| 3684 #loader.offline .bolt{ | |
| 3685 opacity:1; | |
| 3686 } | |
| 3687 /*#loader.transitionOn .mask.first .mover{ | |
| 3688 background-color:#999 !important; | |
| 3689 }*/ | |
| 3690 | |
| 3691 #loader.stopped .mask.first .base, | |
| 3692 #loader.finishing .mask.first .base, | |
| 3693 #loader.finishing .mask.second .base, | |
| 3694 #loader.finishing .mask.first .mover{ | |
| 3695 opacity:0 !important; | |
| 3696 } | |
| 3697 | |
| 3698 #loader.finishing .mask.first{ | |
| 3699 border-color:transparent !important; | |
| 3700 } | |
| 3701 #loader.finishing.blue .circle.blue .mask.second .mover{ | |
| 3702 width:0; | |
| 3703 right:100%; | |
| 3704 } | |
| 3705 #loader.finishing.green .circle.green .mask.second .mover{ | |
| 3706 height:0; | |
| 3707 top:100%; | |
| 3708 } | |
| 3709 #loader.finishing.yellow .circle.yellow .mask.second .mover{ | |
| 3710 width:0; | |
| 3711 left:100%; | |
| 3712 } | |
| 3713 #loader.finishing.red .circle.red .mask.second .mover{ | |
| 3714 height:0; | |
| 3715 bottom:100%; | |
| 3716 } | |
| 3717 #loader.finishing .mover{ | |
| 3718 -webkit-transition-delay:0s !important; | |
| 3719 -moz-transition-delay:0s !important; | |
| 3720 transition-delay:0s !important; | |
| 3721 } | |
| 3722 | |
| 3723 /*------------------------------------------------------------------ | |
| 3724 Component: Progress Bar | |
| 3725 ------------------------------------------------------------------*/ | |
| 3726 .kd-progressstatus{ | |
| 3727 color:#202020; | |
| 3728 margin-bottom:0; | |
| 3729 } | |
| 3730 .kd-progresstext{ | |
| 3731 color:#999; | |
| 3732 } | |
| 3733 .kd-progressbar{ | |
| 3734 width:320px; | |
| 3735 border:1px solid #999; | |
| 3736 padding:1px; | |
| 3737 } | |
| 3738 .kd-progresstrack { | |
| 3739 background-color:#ccc; | |
| 3740 width:170px; | |
| 3741 height:5px; | |
| 3742 } | |
| 3743 .kd-progressbar-blue .kd-progresstrack { background-color:#6188f5; } | |
| 3744 | |
| 3745 .kd-progressbar-tall .kd-progresstrack, | |
| 3746 .kd-progressbar-tall .kd-quantitytrack { | |
| 3747 height:8px; | |
| 3748 } | |
| 3749 | |
| 3750 .kd-progressbar-animated .kd-progresstrack { | |
| 3751 -webkit-box-shadow:inner 0 0 0 1px rgba(0,0,0,0.1); | |
| 3752 -moz-box-shadow:inner 0 0 0 1px rgba(0,0,0,0.1); | |
| 3753 box-shadow:inner 0 0 0 1px rgba(0,0,0,0.1); | |
| 3754 | |
| 3755 background-repeat:repeat-x; | |
| 3756 background-position:0 0; | |
| 3757 background-size:16px 8px; | |
| 3758 background-image:-webkit-linear-gradient(315deg, transparent, transparent 33 %, rgba(0,0,0,0.12) 33%, rgba(0,0,0,0.12) 66%, transparent 66%, transparent); | |
| 3759 background-image:-moz-linear-gradient(315deg, transparent, transparent 33%, rgba(0,0,0,0.12) 33%, rgba(0,0,0,0.12) 66%, transparent 66%, transparent); | |
| 3760 background-image:-o-linear-gradient(315deg, transparent, transparent 33%, rg ba(0,0,0,0.12) 33%, rgba(0,0,0,0.12) 66%, transparent 66%, transparent); | |
| 3761 background-image:linear-gradient(315deg, transparent, transparent 33%, rgba( 0,0,0,0.12) 33%, rgba(0,0,0,0.12) 66%, transparent 66%, transparent); | |
| 3762 | |
| 3763 -webkit-animation-name: bg; | |
| 3764 -webkit-animation-duration: 0.8s; | |
| 3765 -webkit-animation-iteration-count: infinite; | |
| 3766 -webkit-animation-timing-function: linear; | |
| 3767 } | |
| 3768 .kd-progressbar-animated.kd-progressbar-tall .kd-progresstrack { | |
| 3769 background-size:20px 10px; | |
| 3770 -webkit-animation-name: bg-tall; | |
| 3771 } | |
| 3772 | |
| 3773 @-webkit-keyframes bg { | |
| 3774 0% { background-position:0 0; } | |
| 3775 100% { background-position:-16px 0; } | |
| 3776 } | |
| 3777 @-webkit-keyframes bg-tall { | |
| 3778 0% { background-position:0 0; } | |
| 3779 100% { background-position:-20px 0; } | |
| 3780 } | |
| 3781 | |
| 3782 /*------------------------------------------------------------------ | |
| 3783 Component: Quantity Bar | |
| 3784 ------------------------------------------------------------------*/ | |
| 3785 .kd-quantitytrack{ | |
| 3786 width:170px; | |
| 3787 height:5px; | |
| 3788 background-color: #CCC; | |
| 3789 background-image: -webkit-linear-gradient(0, transparent 50%, white 50%); | |
| 3790 background-image: -moz-linear-gradient(0, transparent 50%, white 50%); | |
| 3791 background-image: linear-gradient(0, transparent 50%, white 50%); | |
| 3792 -o-background-size: 5px; | |
| 3793 -moz-background-size: 5px; | |
| 3794 -webkit-background-size: 5px; | |
| 3795 background-size: 5px; | |
| 3796 } | |
| 3797 | |
| 3798 /*------------------------------------------------------------------ | |
| 3799 Component: Scrollbars | |
| 3800 ------------------------------------------------------------------*/ | |
| 3801 .scrollBarBox{ | |
| 3802 width:144px; | |
| 3803 margin-right:44px; | |
| 3804 position:relative; | |
| 3805 display:inline-block; | |
| 3806 -webkit-box-sizing:border-box; | |
| 3807 } | |
| 3808 .scrollBarInner{ | |
| 3809 height:300px; | |
| 3810 overflow:auto; | |
| 3811 padding-top:20px; | |
| 3812 padding-right:16px; | |
| 3813 } | |
| 3814 .scrollBarInner .shadowTop{ | |
| 3815 width:100%; | |
| 3816 margin-right:0; | |
| 3817 height:6px; | |
| 3818 position:absolute; | |
| 3819 top:0; | |
| 3820 left:0; | |
| 3821 background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,. 2)), to(rgba(0,0,0,0))); | |
| 3822 -webkit-mask-box-image:-webkit-gradient(linear, left top, right top, color-s top(0.0, rgba(0,0,0,0.1)), color-stop(0.5, rgba(0,0,0,.8)), color-stop(1.0, rgba (0,0,0,0.1))); | |
| 3823 opacity:0; | |
| 3824 } | |
| 3825 .scrollBarInner .shadowTop:after { | |
| 3826 content:""; | |
| 3827 display:block; | |
| 3828 position:absolute; | |
| 3829 top:0px; | |
| 3830 left:0; | |
| 3831 width:100%; | |
| 3832 height:0; | |
| 3833 border-top:1px solid #ebebeb; /*FOR IE*/ | |
| 3834 border-top:1px solid rgba(0, 0, 0, 0.3); | |
| 3835 } | |
| 3836 | |
| 3837 .scrollBarInner .shadowBottom{ | |
| 3838 width:100%; | |
| 3839 margin-right:0; | |
| 3840 height:4px; | |
| 3841 position:absolute; | |
| 3842 bottom:0; | |
| 3843 left:0; | |
| 3844 background:-webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,. 2)), to(rgba(0,0,0,0))); | |
| 3845 -webkit-mask-box-image:-webkit-gradient(linear, left top, right top, color-s top(0.0, rgba(0,0,0,0.1)), color-stop(0.5, rgba(0,0,0,.8)), color-stop(1.0, rgba (0,0,0,0.1))); | |
| 3846 opacity:1; | |
| 3847 } | |
| 3848 .scrollBarInner .shadowBottom:after { | |
| 3849 content:""; | |
| 3850 display:block; | |
| 3851 position:absolute; | |
| 3852 bottom:0px; | |
| 3853 left:0; | |
| 3854 width:100%; | |
| 3855 height:0; | |
| 3856 border-bottom:1px solid #ebebeb; /*FOR IE*/ | |
| 3857 border-bottom:1px solid rgba(0, 0, 0, 0.3); | |
| 3858 } | |
| 3859 | |
| 3860 ::-webkit-scrollbar { | |
| 3861 width: 16px; | |
| 3862 height: 16px; | |
| 3863 } | |
| 3864 | |
| 3865 ::-webkit-scrollbar-button { | |
| 3866 height: 0px; | |
| 3867 width: 0px; | |
| 3868 } | |
| 3869 | |
| 3870 ::-webkit-scrollbar-button:start:decrement, | |
| 3871 ::-webkit-scrollbar-button:end:increment { | |
| 3872 display: block; | |
| 3873 } | |
| 3874 | |
| 3875 ::-webkit-scrollbar-button:vertical:start:increment, | |
| 3876 ::-webkit-scrollbar-button:vertical:end:decrement { | |
| 3877 display: none; | |
| 3878 } | |
| 3879 ::-webkit-scrollbar-track:vertical { | |
| 3880 border-right: 0px solid transparent; | |
| 3881 border-left: 5px solid transparent; | |
| 3882 background-clip:padding-box; | |
| 3883 background-color: white; | |
| 3884 } | |
| 3885 ::-webkit-scrollbar-track:horizontal { | |
| 3886 border-bottom: 0px solid transparent; | |
| 3887 border-top: 5px solid transparent; | |
| 3888 background-clip:padding-box; | |
| 3889 background-color: white; | |
| 3890 | |
| 3891 } | |
| 3892 | |
| 3893 ::-webkit-scrollbar-thumb { | |
| 3894 min-height: 28px; | |
| 3895 padding-top:100px; | |
| 3896 background-clip:padding-box; | |
| 3897 background-color: rgba(0,0,0,0.2); | |
| 3898 -webkit-box-shadow: inset 1px 1px 0px rgba(0,0,0,0.10), | |
| 3899 inset 0px -1px 0px rgba(0,0,0,0.07); | |
| 3900 } | |
| 3901 | |
| 3902 ::-webkit-scrollbar-thumb:hover { | |
| 3903 background-color: rgba(0,0,0,0.4); | |
| 3904 -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25); | |
| 3905 } | |
| 3906 | |
| 3907 ::-webkit-scrollbar-thumb:active { | |
| 3908 -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35); | |
| 3909 background-color: rgba(0,0,0,0.5); | |
| 3910 } | |
| 3911 ::-webkit-scrollbar-thumb:vertical { | |
| 3912 border-top: 0px solid transparent; | |
| 3913 border-bottom: 0px solid transparent; | |
| 3914 border-right: 0px solid transparent; | |
| 3915 border-left: 5px solid transparent; | |
| 3916 } | |
| 3917 ::-webkit-scrollbar-thumb:horizontal { | |
| 3918 border-top: 5px solid transparent; | |
| 3919 border-bottom: 0px solid transparent; | |
| 3920 border-right: 0px solid transparent; | |
| 3921 border-left: 0px solid transparent; | |
| 3922 } | |
| 3923 | |
| 3924 .inline-scroller .scrollBarInner::-webkit-scrollbar-track:vertical { | |
| 3925 border-left: 6px solid transparent; | |
| 3926 border-right: 1px solid transparent; | |
| 3927 } | |
| 3928 .inline-scroller .scrollBarInner::-webkit-scrollbar-track:horizontal { | |
| 3929 border-top: 6px solid transparent; | |
| 3930 border-bottom: 1px solid transparent; | |
| 3931 } | |
| 3932 | |
| 3933 .inline-scroller .scrollBarInner::-webkit-scrollbar-thumb:vertical { | |
| 3934 border-left: 6px solid transparent; | |
| 3935 border-right: 1px solid transparent; | |
| 3936 border-top: 0px solid transparent; | |
| 3937 border-bottom: 0px solid transparent; | |
| 3938 } | |
| 3939 .inline-scroller .scrollBarInner::-webkit-scrollbar-thumb:horizontal { | |
| 3940 border-left: 0px solid transparent; | |
| 3941 border-right: 0px solid transparent; | |
| 3942 border-top: 6px solid transparent; | |
| 3943 border-bottom: 1px solid transparent; | |
| 3944 } | |
| 3945 | |
| 3946 ::-webkit-scrollbar-track:hover { | |
| 3947 background-color:rgba(0,0,0,0.05); | |
| 3948 -webkit-box-shadow: inset 1px 0px 0px rgba(0,0,0,0.10); | |
| 3949 } | |
| 3950 | |
| 3951 ::-webkit-scrollbar-track:active { | |
| 3952 background-color:rgba(0,0,0,0.05); | |
| 3953 -webkit-box-shadow: inset 1px 0px 0px rgba(0,0,0,0.14), | |
| 3954 inset -1px -1px 0px rgba(0,0,0,0.07); | |
| 3955 } | |
| 3956 | |
| 3957 /*------------------------------------------------------------------ | |
| 3958 Component: Tooltips | |
| 3959 ------------------------------------------------------------------*/ | |
| 3960 #kd-tooltip { | |
| 3961 display: block; | |
| 3962 position: absolute; | |
| 3963 background: #2d2d2d; | |
| 3964 top: -5px; | |
| 3965 color: #FFF; | |
| 3966 font-weight: bold; | |
| 3967 text-align: center; | |
| 3968 outline: 1px solid rgba(255,255,255,0.5); | |
| 3969 height: 29px; | |
| 3970 line-height: 29px; | |
| 3971 margin-left: -20px; | |
| 3972 padding: 0 10px; | |
| 3973 font-size: 11px; | |
| 3974 z-index: 2000; | |
| 3975 opacity: 0.0; | |
| 3976 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); | |
| 3977 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| 3978 -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.2); | |
| 3979 -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.2); | |
| 3980 box-shadow: 1px 2px 4px rgba(0,0,0,0.2); | |
| 3981 -webkit-box-sizing: border-box; | |
| 3982 -moz-box-sizing: border-box; | |
| 3983 box-sizing: border-box; | |
| 3984 -webkit-transition: opacity 0.13s; | |
| 3985 -moz-transition: opacity 0.13s; | |
| 3986 -o-transition: opacity 0.13s; | |
| 3987 transition: opacity 0.13s; | |
| 3988 } | |
| 3989 #kd-tooltip .pointer { | |
| 3990 outline: none; | |
| 3991 display: block; | |
| 3992 position: absolute; | |
| 3993 top: -5px; | |
| 3994 left: 24px; | |
| 3995 margin: 0 0 0 -5px; | |
| 3996 width: 0; | |
| 3997 height: 0; | |
| 3998 line-height: 0px; | |
| 3999 font-size: 0px; | |
| 4000 /* This sets the tooptip pointer color */ | |
| 4001 border-top: transparent; | |
| 4002 border-left: 5px solid transparent; | |
| 4003 border-right: 5px solid transparent; | |
| 4004 border-bottom: 5px solid #2d2d2d; | |
| 4005 } | |
| 4006 #kd-tooltip.visible { | |
| 4007 opacity: 1.0; | |
| 4008 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); | |
| 4009 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| 4010 } | |
| 4011 | |
| 4012 /*------------------------------------------------------------------ | |
| 4013 Component: Sample Form | |
| 4014 ------------------------------------------------------------------*/ | |
| 4015 form ul li{ | |
| 4016 margin-bottom:16px; | |
| 4017 } | |
| 4018 form{ | |
| 4019 width:336px; | |
| 4020 } | |
| 4021 fieldset{ | |
| 4022 border:1px solid #ebebeb; | |
| 4023 padding:16px; | |
| 4024 } | |
| 4025 legend{ | |
| 4026 padding:0 6px; | |
| 4027 } | |
| 4028 form label{ | |
| 4029 display:block; | |
| 4030 line-height:29px; | |
| 4031 } | |
| 4032 form input[type=text]{ | |
| 4033 width:100%; | |
| 4034 } | |
| 4035 form label input[type=radio], form label input[type=checkbox]{ | |
| 4036 bottom:-1px; | |
| 4037 } | |
| 4038 form label input[type=checkbox]{ | |
| 4039 margin-right:5px; | |
| 4040 } | |
| 4041 form .kd-button.kd-select{ | |
| 4042 float:none; | |
| 4043 margin-left:0; | |
| 4044 } | |
| 4045 | |
| 4046 /*------------------------------------------------------------------ | |
| 4047 Component: Form Errors | |
| 4048 ------------------------------------------------------------------*/ | |
| 4049 #errorDemo{ | |
| 4050 width:280px; | |
| 4051 } | |
| 4052 | |
| 4053 input[type=text].kd-formerror{ | |
| 4054 border:1px solid #DD4B39; | |
| 4055 } | |
| 4056 .kd-errormessage{ | |
| 4057 color:#DD4B39; | |
| 4058 padding:9px 0 ; | |
| 4059 } | |
| 4060 .kd-errormessage .qm{ | |
| 4061 background:#DD4B39; | |
| 4062 color:#FFF; | |
| 4063 font-weight:bold; | |
| 4064 display:inline-block; | |
| 4065 padding: 0 5px ; | |
| 4066 -webkit-border-radius:10px; | |
| 4067 -moz-border-radius:10px; | |
| 4068 border-radius:10px; | |
| 4069 | |
| 4070 position: relative; | |
| 4071 top: -1px; | |
| 4072 } | |
| 4073 .kd-textlabel{ | |
| 4074 color:#666; | |
| 4075 } | |
| 4076 | |
| 4077 /*------------------------------------------------------------------ | |
| 4078 Component: List | |
| 4079 ------------------------------------------------------------------*/ | |
| 4080 | |
| 4081 .kd-list table, | |
| 4082 .kd-list tbody { | |
| 4083 display:block; | |
| 4084 width:100%; | |
| 4085 overflow:visible; | |
| 4086 } | |
| 4087 .kd-list table tr { | |
| 4088 display:block; | |
| 4089 position:relative; | |
| 4090 height:39px; | |
| 4091 margin-top:-1px; | |
| 4092 background-color:#f8f8f8; | |
| 4093 border:1px solid; | |
| 4094 border-color:#ebebea transparent; | |
| 4095 z-index:1; | |
| 4096 } | |
| 4097 .kd-list table tr.highlighted { | |
| 4098 background:#fff; | |
| 4099 } | |
| 4100 .kd-list table tr.checked { | |
| 4101 background-color: #f6ebae; | |
| 4102 border-color:#ebdb84 transparent; | |
| 4103 z-index:2; | |
| 4104 } | |
| 4105 .kd-list table tr:hover { | |
| 4106 z-index:3; | |
| 4107 border-color:#ccc; | |
| 4108 -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.2); | |
| 4109 -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.2); | |
| 4110 -ms-box-shadow: 0 4px 16px rgba(0,0,0,0.2); | |
| 4111 box-shadow: 0 4px 16px rgba(0,0,0,0.2); | |
| 4112 } | |
| 4113 .kd-list table tr.checked:hover { | |
| 4114 border-color:#e5d36f; | |
| 4115 } | |
| 4116 .kd-list table tr:hover input[type=checkbox], | |
| 4117 .kd-list table tr:hover .fakecheckbox, | |
| 4118 .kd-list table tr.checked input[type=checkbox], | |
| 4119 .kd-list table tr.checked .fakecheckbox { | |
| 4120 background:#fff; | |
| 4121 } | |
| 4122 .kd-list table tr td { | |
| 4123 display:block; | |
| 4124 position:absolute; | |
| 4125 } | |
| 4126 .kd-list table tr td a { | |
| 4127 display:block; | |
| 4128 text-overflow:ellipsis; | |
| 4129 overflow:hidden; | |
| 4130 white-space:nowrap; | |
| 4131 line-height:39px; | |
| 4132 font-size:13px; | |
| 4133 color:#333; | |
| 4134 } | |
| 4135 | |
| 4136 .y-crush .kd-list table tr { | |
| 4137 height:29px; | |
| 4138 } | |
| 4139 .y-crush .kd-list table tr.two-line, | |
| 4140 .mobile .kd-list table tr.two-line { | |
| 4141 height:51px; | |
| 4142 } | |
| 4143 .y-crush .kd-list table tr td a, | |
| 4144 .mobile .kd-list table .two-line td a { | |
| 4145 line-height:29px; | |
| 4146 } | |
| 4147 .mobile .kd-list table tr td:first-child { | |
| 4148 left:16px; | |
| 4149 padding-left:0; | |
| 4150 } | |
| 4151 | |
| 4152 /* KNURLING */ | |
| 4153 .kd-list table.knurling tr:hover:after { | |
| 4154 content:""; | |
| 4155 position:absolute; | |
| 4156 top:2px; | |
| 4157 bottom:2px; | |
| 4158 left:2px; | |
| 4159 width:7px; | |
| 4160 background-image:-webkit-linear-gradient(top, #ddd, #ddd 50%, transparent 50 %, transparent); | |
| 4161 background-image:-moz-linear-gradient(top, #ddd, #ddd 50%, transparent 50%, transparent); | |
| 4162 background-image:linear-gradient(top, #ddd, #ddd 50%, transparent 50%, trans parent); | |
| 4163 background-size:1px 2px; | |
| 4164 cursor:pointer; | |
| 4165 z-index:3; | |
| 4166 } | |
| 4167 .kd-list table.knurling tr.checked:after { | |
| 4168 background-image:-webkit-linear-gradient(top, #dcc961, #dcc961 50%, transpar ent 50%, transparent); | |
| 4169 background-image:-moz-linear-gradient(top, #dcc961, #dcc961 50%, transparent 50%, transparent); | |
| 4170 background-image:linear-gradient(top, #dcc961, #dcc961 50%, transparent 50%, transparent); | |
| 4171 } | |
| 4172 | |
| 4173 /* Responsive resize transitions */ | |
| 4174 .kd-list table tr { | |
| 4175 -webkit-transition:height 0.18s; | |
| 4176 -moz-transition:height 0.18s; | |
| 4177 transition:height 0.18s; | |
| 4178 } | |
| 4179 .kd-list table tr td { | |
| 4180 -webkit-transition-property:top, left, right; | |
| 4181 -webkit-transition-duration:0.18s; | |
| 4182 -moz-transition-property:top, left, right; | |
| 4183 -moz-transition-duration:0.18s; | |
| 4184 transition-property:top, left, right; | |
| 4185 transition-duration:0.18s; | |
| 4186 } | |
| 4187 .kd-list table tr td a { | |
| 4188 -webkit-transition-property:padding, line-height; | |
| 4189 -webkit-transition-duration:0.18s; | |
| 4190 -moz-transition-property:padding, line-height; | |
| 4191 -moz-transition-duration:0.18s; | |
| 4192 transition-property:padding, line-height; | |
| 4193 transition-duration:0.18s; | |
| 4194 } | |
| 4195 | |
| 4196 /*------------------------------------------------------------------ | |
| 4197 Component: Footers | |
| 4198 ------------------------------------------------------------------*/ | |
| 4199 .pageFooter{ | |
| 4200 padding:11px 44px; | |
| 4201 border-top:1px solid #ebebeb; | |
| 4202 font-size:12px; | |
| 4203 } | |
| 4204 .pageFooter a:hover{ | |
| 4205 text-decoration:underline; | |
| 4206 } | |
| 4207 .pageFooter, .pageFooter a{color:#999;} | |
| 4208 .pageFooter ul.linklist.right{ | |
| 4209 float:right; | |
| 4210 } | |
| 4211 .pageFooter ul.linklist.left{ | |
| 4212 float:left; | |
| 4213 } | |
| 4214 .pageFooter ul.linklist > li, .pageFooter ul.linklist{ | |
| 4215 /* display:inline;*/ | |
| 4216 float:left; | |
| 4217 } | |
| 4218 .pageFooter ul.linklist > li{ | |
| 4219 margin:0 8px; | |
| 4220 } | |
| 4221 .pageFooter ul.linklist .kd-menubutton{ | |
| 4222 border-left:1px solid; | |
| 4223 border-right:1px solid; | |
| 4224 border-color:transparent; | |
| 4225 margin:-11px 0 0; | |
| 4226 padding:11px 7px; | |
| 4227 } | |
| 4228 .pageFooter ul.linklist .chatbutton{ | |
| 4229 padding-top:8px; | |
| 4230 padding-bottom:6px; | |
| 4231 margin-right:60px; | |
| 4232 } | |
| 4233 .pageFooter ul.linklist .kd-menubutton.selected a{ | |
| 4234 color:#000; | |
| 4235 } | |
| 4236 .pageFooter ul.linklist .kd-menubutton.selected .kd-disclosureindicator{ | |
| 4237 -webkit-transform:rotate(-90deg); | |
| 4238 } | |
| 4239 .pageFooter ul.linklist .kd-menubutton:hover, .pageFooter ul.linklist .kd-menubu tton.selected{ | |
| 4240 border-color:#ebebeb; | |
| 4241 } | |
| 4242 .pageFooter ul.linklist .kd-menubutton:hover a{ | |
| 4243 text-decoration:none; | |
| 4244 } | |
| 4245 .pageFooter .kd-menubutton a{margin:0;} | |
| 4246 | |
| 4247 .pageFooter .kd-menubutton .kd-disclosureindicator{ | |
| 4248 margin:4px 0 0 4px; | |
| 4249 opacity:.6; | |
| 4250 } | |
| 4251 .pageFooter .kd-menubutton img{ | |
| 4252 opacity:.6; | |
| 4253 } | |
| 4254 .pageFooter .kd-menubutton:hover .kd-disclosureindicator, .pageFooter .kd-menubu tton:hover img, .pageFooter .kd-menubutton.selected img{ | |
| 4255 opacity:.8; | |
| 4256 } | |
| 4257 .pageFooter .kd-menulist{ | |
| 4258 -webkit-box-shadow: 0px -2px 4px rgba(0,0,0,0.2); | |
| 4259 -moz-box-shadow: 0px -2px 4px rgba(0,0,0,0.2); | |
| 4260 box-shadow: 0 -2px 4px rgba(0,0,0,0.2); | |
| 4261 outline:0; | |
| 4262 border:1px solid #a7a7a7; | |
| 4263 border-bottom:0; | |
| 4264 } | |
| 4265 | |
| 4266 .componentName, #stickersheet h2.componentName a { color: #DD4B39; } | |
| 4267 .kd-content-sidebar .kd-sidebarlistitem.selected > a { border-left-color:#dd4b39 ; } | |
| 4268 .kd-appbar .kd-appname, .kd-appbar .kd-appname a { color:#DD4B39; } | |
| 4269 | |
| 4270 | |
| 4271 | |
| 4272 .kd-button-submit.disabled, .kd-button-submit.disabled:hover, .kd-button-submit. disabled:active { | |
| 4273 border-color:#3079ed; | |
| 4274 background-color: #4d90fe; | |
| 4275 } | |
| 4276 .kd-button-share.disabled, .kd-button-share.disabled:hover, .kd-button-share.dis abled:active { | |
| 4277 border-color:#29691d; | |
| 4278 background-color: #3d9400; | |
| 4279 } | |
| 4280 .kd-button-action.disabled, .kd-button-action.disabled:hover, .kd-button-action. disabled:active { | |
| 4281 border-color: #b0281a; | |
| 4282 background-color: #d14836; | |
| 4283 } | |
| 4284 | |
| 4285 .kd-button-submit:focus, .kd-button-submit.focus{ | |
| 4286 border-color:#4D90FE | |
| 4287 } | |
| 4288 .kd-button-share:focus, .kd-button-share.focus{ | |
| 4289 border-color:#29691d; | |
| 4290 } | |
| 4291 .kd-button-action:focus, .kd-button-action.focus{ | |
| 4292 border-color:#d14836; | |
| 4293 } | |
| 4294 | |
| 4295 .kd-button-submit { | |
| 4296 border-color: #3079ed; | |
| 4297 background-color: #4d90fe; | |
| 4298 background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe) ,to(#4787ed)); | |
| 4299 background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed); | |
| 4300 background-image: -moz-linear-gradient(top,#4d90fe,#4787ed); | |
| 4301 background-image: -ms-linear-gradient(top,#4d90fe,#4787ed); | |
| 4302 background-image: -o-linear-gradient(top,#4d90fe,#4787ed); | |
| 4303 background-image: linear-gradient(top,#4d90fe,#4787ed); | |
| 4304 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',E ndColorStr='#4787ed'); | |
| 4305 } | |
| 4306 .kd-button-submit:hover { | |
| 4307 border-color: #2f5bb7; | |
| 4308 background-color: #357ae8; | |
| 4309 background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe) ,to(#357ae8)); | |
| 4310 background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8); | |
| 4311 background-image: -moz-linear-gradient(top,#4d90fe,#357ae8); | |
| 4312 background-image: -ms-linear-gradient(top,#4d90fe,#357ae8); | |
| 4313 background-image: -o-linear-gradient(top,#4d90fe,#357ae8); | |
| 4314 background-image: linear-gradient(top,#4d90fe,#357ae8); | |
| 4315 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',E ndColorStr='#357ae8'); | |
| 4316 } | |
| 4317 | |
| 4318 .kd-button-share { | |
| 4319 border-color: #29691d; | |
| 4320 background-color: #3d9400; | |
| 4321 background-image: -webkit-gradient(linear,left top,left bottom,from(#3d9400) ,to(#398a00)); | |
| 4322 background-image: -webkit-linear-gradient(top,#3d9400,#398a00); | |
| 4323 background-image: -moz-linear-gradient(top,#3d9400,#398a00); | |
| 4324 background-image: -ms-linear-gradient(top,#3d9400,#398a00); | |
| 4325 background-image: -o-linear-gradient(top,#3d9400,#398a00); | |
| 4326 background-image: linear-gradient(top,#3d9400,#398a00); | |
| 4327 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3d9400',E ndColorStr='#398a00'); | |
| 4328 } | |
| 4329 .kd-button-share:hover { | |
| 4330 border-color: #2D6200; | |
| 4331 background-color: #368200; | |
| 4332 background-image: -webkit-gradient(linear,left top,left bottom,from(#3d9400) ,to(#368200)); | |
| 4333 background-image: -webkit-linear-gradient(top,#3d9400,#368200); | |
| 4334 background-image: -moz-linear-gradient(top,#3d9400,#368200); | |
| 4335 background-image: -ms-linear-gradient(top,#3d9400,#368200); | |
| 4336 background-image: -o-linear-gradient(top,#3d9400,#368200); | |
| 4337 background-image: linear-gradient(top,#3d9400,#368200); | |
| 4338 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3d9400',E ndColorStr='#368200'); | |
| 4339 } | |
| 4340 | |
| 4341 .kd-button-action { | |
| 4342 margin-bottom: 16px; | |
| 4343 border: 1px solid transparent; | |
| 4344 color: #FFF; | |
| 4345 text-transform: uppercase; | |
| 4346 letter-spacing:1; | |
| 4347 background-color: #d14836; | |
| 4348 background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39) ,to(#d14836)); | |
| 4349 background-image: -webkit-linear-gradient(top,#dd4b39,#d14836); | |
| 4350 background-image: -moz-linear-gradient(top,#dd4b39,#d14836); | |
| 4351 background-image: -ms-linear-gradient(top,#dd4b39,#d14836); | |
| 4352 background-image: -o-linear-gradient(top,#dd4b39,#d14836); | |
| 4353 background-image: linear-gradient(top,#dd4b39,#d14836); | |
| 4354 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dd4b39',E ndColorStr='#d14836'); | |
| 4355 } | |
| 4356 .kd-button-action:hover { | |
| 4357 border-color: #b0281a; | |
| 4358 border-bottom-color: #AF301F; | |
| 4359 background-color: #c53727; | |
| 4360 background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39) ,to(#c53727)); | |
| 4361 background-image: -webkit-linear-gradient(top,#dd4b39,#c53727); | |
| 4362 background-image: -moz-linear-gradient(top,#dd4b39,#c53727); | |
| 4363 background-image: -ms-linear-gradient(top,#dd4b39,#c53727); | |
| 4364 background-image: -o-linear-gradient(top,#dd4b39,#c53727); | |
| 4365 background-image: linear-gradient(top,#dd4b39,#c53727); | |
| 4366 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dd4b39',E ndColorStr='#c53727'); | |
| 4367 } | |
| 4368 .kd-button-action:active, | |
| 4369 .kd-button-action:focus:active, | |
| 4370 .kd-button-action.focus:active { | |
| 4371 border-color: #992A1B; | |
| 4372 background-color: #b0281a; | |
| 4373 background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39) ,to(#b0281a)); | |
| 4374 background-image: -webkit-linear-gradient(top,#dd4b39,#b0281a); | |
| 4375 background-image: -moz-linear-gradient(top,#dd4b39,#b0281a); | |
| 4376 background-image: -ms-linear-gradient(top,#dd4b39,#b0281a); | |
| 4377 background-image: -o-linear-gradient(top,#dd4b39,#b0281a); | |
| 4378 background-image: linear-gradient(top,#dd4b39,#b0281a); | |
| 4379 } | |
| 4380 | |
| 4381 .kd-accordion .expanded .row > a { color:#d14836; } | |
| 4382 | |
| 4383 /*------------------------------------------------------------------ | |
| 4384 Component: Activity Indicator | |
| 4385 ------------------------------------------------------------------*/ | |
| 4386 #loader .circle.red .mask.first { border-bottom-color:rgb(60,120,248); } | |
| 4387 #loader .circle.yellow .mask.first { border-left-color:rgb(250,36,36); } | |
| 4388 #loader .circle.green .mask.first { border-top-color:rgb(255,211,75); } | |
| 4389 #loader .circle.blue .mask.first { border-right-color:rgb(0,177,95);} | |
| 4390 | |
| 4391 #loader .circle.red .mask.first .base { background-color:rgb(250,36,36); } | |
| 4392 #loader .circle.red .mask.second .base { background-color:rgb(60,120,248); } | |
| 4393 | |
| 4394 #loader .circle.yellow .mask.first .base { background-color:rgb(255,211,75); } | |
| 4395 #loader .circle.yellow .mask.second .base { background-color:rgb(250,36,36); } | |
| 4396 | |
| 4397 #loader .circle.green .mask.first .base { background-color:rgb(0,177,95); } | |
| 4398 #loader .circle.green .mask.second .base { background-color:rgb(255,211,75); } | |
| 4399 | |
| 4400 #loader .circle.blue .mask.first .base { background-color:rgb(60,120,248); } | |
| 4401 #loader .circle.blue .mask.second .base { background-color:rgb(0,177,95); } | |
| 4402 | |
| 4403 #loader .circle.initial .mask .mover { background-color:rgb(33,89,189); } | |
| 4404 | |
| 4405 #loader .circle.red .mask.first .mover { background-color:rgb(60,120,248); } | |
| 4406 #loader .circle.red .mask.second .mover { background-color:rgb(158,18,18); } | |
| 4407 | |
| 4408 #loader .circle.yellow .mask.first .mover { background-color:rgb(250,36,36); } | |
| 4409 #loader .circle.yellow .mask.second .mover { background-color:rgb(222,161,26); } | |
| 4410 | |
| 4411 #loader .circle.green .mask.first .mover { background-color:rgb(255,211,75); } | |
| 4412 #loader .circle.green .mask.second .mover { background-color:rgb(0,137,72); } | |
| 4413 | |
| 4414 #loader .circle.blue .mask.first .mover { background-color:rgb(0,177,95); } | |
| 4415 #loader .circle.blue .mask.second .mover { background-color:rgb(33,89,189); } | |
| 4416 | |
| 4417 #loader.initial .circle.initial .mask .mover { background-color:rgb(60,120,248); } | |
| 4418 | |
| 4419 #loader.yellow .circle.yellow .mask.first { border-color:rgb(255,211,75); } | |
| 4420 #loader.yellow .circle.yellow .mask.first .mover { background-color:rgb(158,18,1 8); } | |
| 4421 #loader.yellow .circle.yellow .mask.second .mover { background-color:rgb(255,211 ,75); } | |
| 4422 | |
| 4423 #loader.green .circle.green .mask.first { border-color:rgb(0,177,95); } | |
| 4424 #loader.green .circle.green .mask.first .mover { background-color:rgb(222,161,26 ); } | |
| 4425 #loader.green .circle.green .mask.second .mover { background-color:rgb(0,177,95) ; } | |
| 4426 | |
| 4427 #loader.blue .circle.blue .mask.first { border-color:rgb(60,120,248); } | |
| 4428 #loader.blue .circle.blue .mask.first .mover { background-color:rgb(0,137,72); } | |
| 4429 #loader.blue .circle.blue .mask.second .mover { background-color:rgb(60,120,248) ; } | |
| 4430 | |
| 4431 #loader.red .circle.red .mask.first { border-color:rgb(250,36,36); } | |
| 4432 #loader.red .circle.red .mask.first .mover { background-color:rgb(33,89,189); } | |
| 4433 #loader.red .circle.red .mask.second .mover { background-color:rgb(250,36,36); } | |
| 4434 | |
| 6 a { | 4435 a { |
| 7 color: rgb(0, 102, 204); | 4436 color: rgb(0, 102, 204); |
| 8 text-decoration: none; | 4437 text-decoration: none; |
| 9 } | 4438 } |
| 10 | 4439 |
| 11 body { | 4440 body { |
| 12 background: -webkit-gradient(radial, center center, 0, center center, 400, | 4441 margin: 0; |
| 13 from(rgb(254, 254, 254)), | 4442 padding: 20px; |
| 14 to(rgb(239, 239, 239))); | |
| 15 font-family: 'Open sans', Arial, sans-serif; | |
| 16 margin:0; | |
| 17 padding:0; | |
| 18 direction: __MSG_@@bidi_dir__; | 4443 direction: __MSG_@@bidi_dir__; |
| 19 } | 4444 } |
| 20 | 4445 |
| 21 button, input { | 4446 button, input { |
| 22 font-family: inherit; | 4447 font-family: inherit; |
| 23 font-size: inherit; | 4448 font-size: inherit; |
| 24 } | 4449 } |
| 25 | 4450 |
| 26 button { | 4451 button { |
| 27 background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5); | 4452 background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5); |
| (...skipping 21 matching lines...) Expand all Loading... | |
| 49 background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5); | 4474 background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5); |
| 50 border-color: #aaa; | 4475 border-color: #aaa; |
| 51 color: #888; | 4476 color: #888; |
| 52 -webkit-box-shadow: none; | 4477 -webkit-box-shadow: none; |
| 53 } | 4478 } |
| 54 | 4479 |
| 55 form { | 4480 form { |
| 56 display: inline; | 4481 display: inline; |
| 57 } | 4482 } |
| 58 | 4483 |
| 59 h1 { | 4484 h1.icon-label { |
| 60 font-size: 24px; | 4485 vertical-align: 14px; |
| 61 font-weight: normal; | 4486 margin-bottom: 60px; |
| 4487 font-size: 28px; | |
| 4488 font-weight: 300; | |
| 4489 color: #aaa; | |
| 4490 font-family: "Open sans", "Ariel", sans-serif | |
| 62 } | 4491 } |
| 63 | 4492 |
| 64 html { | 4493 h2 { |
| 65 /* | 4494 color: #666; |
| 66 Used to force background gradient to center correctly. | 4495 } |
| 67 http://crbug.com/109705 | 4496 |
| 68 */ | 4497 header { |
| 69 height: 100%; | 4498 display: -webkit-box; |
| 4499 width: 100%; | |
| 4500 } | |
| 4501 | |
| 4502 header > .box-spacer { | |
| 4503 -webkit-box-flex: 1; | |
| 70 } | 4504 } |
| 71 | 4505 |
| 72 label { | 4506 label { |
| 73 color: black; | 4507 color: black; |
| 74 font-weight: bold; | 4508 font-weight: bold; |
| 75 } | 4509 } |
| 76 | 4510 |
| 4511 section { | |
| 4512 width: 690px; | |
| 4513 margin: 30px auto; | |
| 4514 border: 1px solid #e5e5e5; | |
| 4515 background: #f9f9f9; | |
| 4516 padding: 20px 30px 20px 30px; | |
| 4517 border-radius: 3px; | |
| 4518 box-shadow: 0 2px 5px rgba(0,0,0,0.07); | |
| 4519 } | |
| 4520 | |
| 4521 | |
| 77 /* Classes */ | 4522 /* Classes */ |
| 78 | 4523 |
| 79 .access-code-digit-group { | 4524 .access-code-digit-group { |
| 80 /* | 4525 /* |
| 81 Used for each of the four-digit components of the access code as | 4526 Used for each of the four-digit components of the access code as |
| 82 displayed by the host. | 4527 displayed by the host. |
| 83 */ | 4528 */ |
| 84 padding: 0px 6px; | 4529 padding: 0px 6px; |
| 85 } | 4530 } |
| 86 | 4531 |
| (...skipping 12 matching lines...) Expand all Loading... | |
| 99 conforming correctly to the standard, remove this comment. | 4544 conforming correctly to the standard, remove this comment. |
| 100 */ | 4545 */ |
| 101 text-align: center; | 4546 text-align: center; |
| 102 } | 4547 } |
| 103 | 4548 |
| 104 .collapsed { | 4549 .collapsed { |
| 105 opacity: 0; | 4550 opacity: 0; |
| 106 height: 0 !important; | 4551 height: 0 !important; |
| 107 } | 4552 } |
| 108 | 4553 |
| 109 .choice-header { | |
| 110 font-size: 24px; | |
| 111 font-weight: normal; | |
| 112 margin-__MSG_@@bidi_start_edge__: 10px; | |
| 113 } | |
| 114 | |
| 115 .choice-footer { | 4554 .choice-footer { |
| 116 font-size: 14px; | 4555 font-size: 14px; |
| 117 } | 4556 } |
| 118 | 4557 |
| 119 .choice-panel { | 4558 .choice-panel { |
| 120 margin-top: 17px; | 4559 margin-top: 17px; |
| 121 padding-bottom: 20px; | 4560 padding-bottom: 20px; |
| 122 } | 4561 } |
| 123 | 4562 |
| 124 .clickable { | 4563 .clickable { |
| 125 cursor: pointer; | 4564 cursor: pointer; |
| 126 } | 4565 } |
| 127 | 4566 |
| 128 .description { | |
| 129 margin-bottom: 25px; | |
| 130 } | |
| 131 | |
| 132 .error-state { | 4567 .error-state { |
| 133 background-image: url('icon_warning.png'); | 4568 background-image: url('icon_warning.png'); |
| 134 background-repeat: no-repeat; | 4569 background-repeat: no-repeat; |
| 135 background-position: top __MSG_@@bidi_start_edge__; | 4570 background-position: top __MSG_@@bidi_start_edge__; |
| 136 padding-__MSG_@@bidi_start_edge__: 30px; | 4571 padding-__MSG_@@bidi_start_edge__: 30px; |
| 137 padding-top: 3px; | 4572 padding-top: 3px; |
| 138 margin-bottom: 10px; | 4573 margin-bottom: 8px; |
| 139 color: #900; | 4574 color: #900; |
| 140 display: inline-block; | 4575 display: inline-block; |
| 141 } | 4576 } |
| 142 | 4577 |
| 143 .expiring { | 4578 .expiring { |
| 144 color: #900 !important; | 4579 color: #900 !important; |
| 145 } | 4580 } |
| 146 | 4581 |
| 147 [hidden] { | 4582 [hidden] { |
| 148 display: none !important; | 4583 display: none !important; |
| (...skipping 26 matching lines...) Expand all Loading... | |
| 175 | 4610 |
| 176 .information-box-padding { | 4611 .information-box-padding { |
| 177 -webkit-box-flex: 1; | 4612 -webkit-box-flex: 1; |
| 178 } | 4613 } |
| 179 | 4614 |
| 180 .message { | 4615 .message { |
| 181 text-align:center; | 4616 text-align:center; |
| 182 margin-bottom: 10px; | 4617 margin-bottom: 10px; |
| 183 } | 4618 } |
| 184 | 4619 |
| 185 .mode-select-button { | 4620 .mode-select-button-column { |
| 186 width: 100%; | 4621 text-align: __MSG_@@bidi_end_edge__; |
| 187 height: 32px; | |
| 188 white-space: nowrap; | |
| 189 } | 4622 } |
| 190 | 4623 |
| 191 .mode-select-label { | 4624 .mode-select-button-column button { |
| 192 padding-__MSG_@@bidi_end_edge__: 20px; | 4625 min-width: 72px; |
| 193 } | 4626 } |
| 194 | 4627 |
| 195 .mode-select-table { | 4628 .mode-select-table { |
| 196 margin-__MSG_@@bidi_start_edge__: 40px; | |
| 197 width: 600px; /* width + margin = body width */ | |
| 198 border-collapse: collapse; | 4629 border-collapse: collapse; |
| 199 margin-top: 40px; | 4630 margin-top: 30px; |
| 4631 width: 100%; | |
| 200 } | 4632 } |
| 201 | 4633 |
| 202 .mode-select-table-spacer { | 4634 .mode-select-table-spacer { |
| 203 height: 20px; | 4635 height: 13px; |
| 204 } | 4636 } |
| 205 | 4637 |
| 206 .mode-select-table-underline td { | 4638 .mode-select-table-underline td { |
| 207 border-bottom: 1px solid #c6c6c6; | 4639 border-bottom: 1px solid #ebebeb; |
| 208 } | 4640 } |
| 209 | 4641 |
| 210 .hide-scrollbars { | 4642 .hide-scrollbars { |
| 211 overflow-y: hidden; | 4643 overflow-y: hidden; |
| 212 } | 4644 } |
| 213 | 4645 |
| 214 .host-list-container { | |
| 215 -webkit-transition: all 0.5s; | |
| 216 overflow: hidden; | |
| 217 } | |
| 218 | |
| 219 .host-list-table { | 4646 .host-list-table { |
| 220 margin-__MSG_@@bidi_start_edge__: 30px; | 4647 width: 100%; |
| 221 width: 610px; /* width + margin = body width */ | |
| 222 border-spacing: 0; | 4648 border-spacing: 0; |
| 223 } | 4649 } |
| 224 | 4650 |
| 225 .host-list-row { | 4651 .host-list-row { |
| 226 height: 50px; | 4652 height: 50px; |
| 227 color: black; | 4653 color: black; |
| 228 } | 4654 } |
| 229 | 4655 |
| 230 .host-list-row td { | 4656 .host-list-row td { |
| 231 border-bottom: 1px solid transparent; | 4657 border-bottom: 1px solid #ebebeb; |
| 232 border-top: 1px solid transparent; | |
| 233 } | 4658 } |
| 234 | 4659 |
| 235 .host-list-row:hover { | 4660 td { |
| 236 background-color: #e7eef2; | 4661 vertical-align: middle; |
| 4662 } | |
| 4663 | |
| 4664 .host-online:hover { | |
| 4665 background-color: #f2f2f2; | |
| 237 } | 4666 } |
| 238 | 4667 |
| 239 .host-list-rename-icon, .host-list-remove-icon { | 4668 .host-list-rename-icon, .host-list-remove-icon { |
| 240 opacity: 0; | 4669 opacity: 0; |
| 241 } | 4670 } |
| 242 | 4671 |
| 243 .host-list-row:hover .host-list-rename-icon { | 4672 .host-list-row:hover .host-list-rename-icon { |
| 244 opacity: 0.8; | 4673 opacity: 0.8; |
| 245 } | 4674 } |
| 246 | 4675 |
| 247 .host-list-row:hover .host-list-remove-icon { | 4676 .host-list-row:hover .host-list-remove-icon { |
| 248 opacity: 0.3; | 4677 opacity: 0.3; |
| 249 } | 4678 } |
| 250 | 4679 |
| 251 .host-list-edit:hover .host-list-rename-icon { | 4680 .host-list-edit:hover .host-list-rename-icon { |
| 252 opacity: 1; | 4681 opacity: 1; |
| 253 } | 4682 } |
| 254 | 4683 |
| 255 .host-list-edit:hover .host-list-remove-icon { | 4684 .host-list-edit:hover .host-list-remove-icon { |
| 256 opacity: 0.5; | 4685 opacity: 0.5; |
| 257 } | 4686 } |
| 258 | 4687 |
| 259 .host-list-row:hover td { | 4688 .host-list-main-icon { |
| 260 border-bottom: 1px solid #c6c6c6; | 4689 width: 40px; |
| 261 border-top: 1px solid #c6c6c6; | |
| 262 } | 4690 } |
| 263 | 4691 |
| 264 .host-list-row-end { | 4692 .host-list-edit-icon, |
| 265 padding-__MSG_@@bidi_end_edge__: 10px; | 4693 .host-list-rename-icon { |
| 4694 width: 16px; | |
| 266 } | 4695 } |
| 267 | 4696 |
| 268 .host-list-row-start { | 4697 .host-offline .host-list-label, |
| 269 padding-__MSG_@@bidi_start_edge__: 10px; | 4698 .host-offline .host-list-main-icon { |
| 4699 opacity: 0.5; | |
| 270 } | 4700 } |
| 271 | 4701 |
| 272 .host-offline { | 4702 .kd-button { |
| 273 color: #a9a9a9; | 4703 white-space:nowrap; |
| 274 } | |
| 275 | |
| 276 .host-offline .host-list-main-icon { | |
| 277 opacity: 0.5; | |
| 278 } | 4704 } |
| 279 | 4705 |
| 280 .small-print { | 4706 .small-print { |
| 281 font-size: 13px; | 4707 font-size: 13px; |
| 282 color: #AAA; | 4708 color: #AAA; |
| 283 } | 4709 } |
| 284 | 4710 |
| 285 .top-primary { | |
| 286 font-size: 14px; | |
| 287 position: absolute; | |
| 288 top: 0.5em; | |
| 289 __MSG_@@bidi_start_edge__: 0.5em; | |
| 290 } | |
| 291 | |
| 292 .top-secondary { | |
| 293 font-size: 14px; | |
| 294 position: absolute; | |
| 295 top: 0.5em; | |
| 296 __MSG_@@bidi_end_edge__: 0.5em; | |
| 297 } | |
| 298 | |
| 299 .waiting { | 4711 .waiting { |
| 300 color: rgb(180, 180, 180); | 4712 color: rgb(180, 180, 180); |
| 301 } | 4713 } |
| 302 | 4714 |
| 303 /* Ids */ | 4715 /* Ids */ |
| 304 #access-code-countdown-container { | 4716 #access-code-countdown-container { |
| 305 height: 50px; | 4717 height: 50px; |
| 306 text-align: center; | 4718 text-align: center; |
| 307 } | 4719 } |
| 308 | 4720 |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 344 } | 4756 } |
| 345 | 4757 |
| 346 #client-footer-text, #host-footer-text { | 4758 #client-footer-text, #host-footer-text { |
| 347 text-align: center; | 4759 text-align: center; |
| 348 } | 4760 } |
| 349 | 4761 |
| 350 #current-email { | 4762 #current-email { |
| 351 color: rgba(0, 0, 0, 0.5); | 4763 color: rgba(0, 0, 0, 0.5); |
| 352 } | 4764 } |
| 353 | 4765 |
| 354 #daemon-control { | 4766 #daemon-plugin-container { |
| 355 margin-top: 50px; | 4767 width: 0; |
| 4768 height: 0; | |
| 356 } | 4769 } |
| 357 | 4770 |
| 358 #dialog-screen { | 4771 #dialog-screen { |
| 359 position: absolute; | 4772 position: absolute; |
| 360 top: 0; | 4773 top: 0; |
| 361 left: 0; | 4774 left: 0; |
| 362 width: 100%; | 4775 width: 100%; |
| 363 height: 100%; | 4776 height: 100%; |
| 364 background-color: #fff; | 4777 background-color: #fff; |
| 365 opacity: 0.75; | 4778 opacity: 0.75; |
| 366 } | 4779 } |
| 367 | 4780 |
| 368 #divider-top { | 4781 #divider-top { |
| 369 margin: 10px 0 15px 0; | 4782 margin: 10px 0 15px 0; |
| 370 } | 4783 } |
| 371 | 4784 |
| 372 #divider-bottom { | 4785 #divider-bottom { |
| 373 margin: 25px 0 10px 0; | 4786 margin: 25px 0 10px 0; |
| 374 } | 4787 } |
| 375 | 4788 |
| 376 #email-status { | 4789 #email-status { |
| 377 margin-__MSG_@@bidi_end_edge__: 0.5ex; | 4790 margin-__MSG_@@bidi_end_edge__: 0.5ex; |
| 378 } | 4791 } |
| 379 | 4792 |
| 380 #icon { | 4793 #icon { |
| 381 height: 64px; | 4794 height: 64px; |
| 382 width: 64px; | 4795 width: 64px; |
| 383 } | 4796 } |
| 384 | 4797 |
| 385 #main { | |
| 386 color: rgb(115, 115, 115); | |
| 387 font-size: 16px; | |
| 388 margin: 100px auto 0 auto; | |
| 389 padding: 10px; | |
| 390 width: 640px; | |
| 391 } | |
| 392 | |
| 393 #host-list-error { | 4798 #host-list-error { |
| 394 margin-__MSG_@@bidi_start_edge__: 40px; | 4799 margin-__MSG_@@bidi_start_edge__: 40px; |
| 395 } | 4800 } |
| 396 | 4801 |
| 397 #session-mode { | 4802 #session-mode { |
| 398 position: absolute; | 4803 position: absolute; |
| 399 -webkit-box-shadow: 0 0 8px 0 black; | 4804 -webkit-box-shadow: 0 0 8px 0 black; |
| 400 -webkit-user-select: none; | 4805 -webkit-user-select: none; |
| 401 } | 4806 } |
| 402 | 4807 |
| 403 #session-client-plugin { | 4808 #session-client-plugin { |
| 404 display: block; | 4809 display: block; |
| 405 } | 4810 } |
| 406 | 4811 |
| 407 #toggle-scaling { | 4812 #toggle-scaling { |
| 408 margin: 1px 0 0 0; | 4813 margin: 1px 0 0 0; |
| 409 padding: 1px; | 4814 padding: 1px; |
| 410 min-width: 0; | 4815 min-width: 0; |
| 411 line-height: 0; | 4816 line-height: 0; |
| 412 } | 4817 } |
| 4818 | |
| 4819 #top-secondary { | |
| 4820 margin-top: 10px | |
| 4821 } | |
| OLD | NEW |
