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