OLD | NEW |
---|---|
1 /* | 1 /* |
2 Copyright (c) 2013 The Chromium Authors. All rights reserved. | 2 Copyright (c) 2013 The Chromium Authors. All rights reserved. |
3 Use of this source code is governed by a BSD-style license that can be | 3 Use of this source code is governed by a BSD-style license that can be |
4 found in the LICENSE file. | 4 found in the LICENSE file. |
5 */ | 5 */ |
6 | 6 |
7 @font-face { | 7 @font-face { |
8 font-family: roboto-bold; | 8 font-family: roboto-bold; |
9 src: url(roboto_bold.ttf); | 9 src: url(roboto_bold.ttf); |
10 } | 10 } |
11 | 11 |
12 /** | 12 /** |
13 * TODO(rsadam@): Remove all these rules once we switch to native | 13 * TODO(rsadam@): Remove all these rules once we switch to native |
14 * shadow dom. | 14 * shadow dom. |
15 */ | 15 */ |
16 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl], | 16 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl], |
17 kb-keyboard.alt-active kb-modifier-key[char=Alt] { | 17 kb-keyboard.alt-active kb-modifier-key[char=Alt] { |
18 color: lightblue; | 18 background-color: #bbbbbb; |
19 } | 19 } |
20 | 20 |
21 kb-keyboard[keyset="upper"] kb-shift-key.dark /deep/ .key { | 21 kb-keyboard[keyset="upper"] kb-shift-key.dark /deep/ .key { |
22 background-image: url('images/shift-filled.svg'); | 22 background-image: url('images/shift-filled.svg'); |
23 } | 23 } |
24 | 24 |
25 kb-keyboard[keyset="lower"] kb-shift-key /deep/ .key{ | 25 kb-keyboard[keyset="lower"] kb-shift-key /deep/ .key{ |
26 background-image: url('images/shift.svg'); | 26 background-image: url('images/shift.svg'); |
27 } | 27 } |
28 | 28 |
29 /** | 29 /** |
30 * Controls whether the shift key should be highlighted or not. | 30 * Controls whether the shift key should be highlighted or not. |
31 */ | 31 */ |
32 kb-keyboard.caps-locked kb-shift-key.dark /deep/ | 32 kb-keyboard.caps-locked kb-shift-key.dark /deep/ |
33 .shift-light { | 33 .shift-light { |
34 -webkit-box-shadow: 0 1px 1px rgba(213, 213, 213, 0.5), | 34 background-image: |
35 0 -1px 1px rgba(213, 213, 213, 0.5); | 35 -webkit-linear-gradient(rgba(0, 0, 255,0.5), rgba(0, 0, 255, 0.5)); |
bshe
2014/04/23 16:16:44
Do you need gradient here? It looks like a color s
rsadam
2014/04/23 16:37:26
Done.
| |
36 background-image: -webkit-linear-gradient(#d5d5d5, #d5d5d5); | |
37 border: none; | |
38 height: 0.2em; | |
39 } | |
40 kb-keyboard.caps-locked kb-shift-key.dark /deep/ | |
41 .shift-light-wrapper { | |
42 bottom: 2px; | |
43 } | 36 } |
44 | 37 |
45 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl], | 38 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl], |
46 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl] { | 39 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl] { |
47 color: lightblue; | 40 color: blue; |
48 } | 41 } |
49 | 42 |
50 /** TODO(rsadam@): Move these rules to kb-row once we uprev to latest Polymer.*/ | 43 .space, |
51 kb-row:nth-child(2) kb-key:not(.dark):not(.active){ | |
52 -webkit-box-shadow: inset 0px 1px #666666, inset 0px -1px #4c4c4c; | |
53 background-image: -webkit-linear-gradient(#5a5a5a, #515151); | |
54 background-size: cover; | |
55 border-bottom-color: #414141; | |
56 border-top-color: #7f7f7f; | |
57 } | |
58 | |
59 kb-row:nth-child(3) kb-key:not(.dark):not(.active){ | |
60 -webkit-box-shadow: inset 0px 1px #5d5d5d, inset 0px -1px #444444; | |
61 background-image: -webkit-linear-gradient(#505050, #494949); | |
62 background-size: cover; | |
63 border-bottom-color: #3a3a3a; | |
64 border-top-color: #787878; | |
65 } | |
66 | |
67 kb-row:nth-child(n+3) kb-key:not(.dark):not(.active){ | |
68 -webkit-box-shadow: inset 0px 1px #565656, inset 0px -1px #434343; | |
69 background-image: -webkit-linear-gradient(#484848, #474747); | |
70 background-size: cover; | |
71 border-bottom-color: #393939; | |
72 border-top-color: #717171; | |
73 } | |
74 | |
75 kb-row:nth-child(2) kb-key:not([invert]) /deep/ .hint { | |
76 color: #2C2C2C; | |
77 } | |
78 | |
79 kb-row:nth-child(3) kb-key:not([invert]) /deep/ .hint { | |
80 color: #272727; | |
81 } | |
82 | |
83 kb-row:nth-child(n+3) kb-key:not([invert]) /deep/ .hint { | |
84 color: #232323; | |
85 } | |
86 | |
87 .dark { | 44 .dark { |
88 font-size: 70%; | 45 font-size: 70%; |
89 } | 46 } |
90 | 47 |
91 .dark:not(.active) { | 48 .dark:not(.active), |
92 -webkit-box-shadow: inset 0px 1px #313131, inset 0px -1px #202020; | 49 :not(kb-altkey-set) > :not(.dark).active { |
93 background-color: #222222; | 50 background-color: #dddddd; |
94 border-bottom-color: #1c1c1c; | |
95 border-top-color: #4f4f4f; | |
96 } | 51 } |
97 | 52 |
98 :not(kb-altkey-set) > .active { | 53 .space { |
99 -webkit-box-shadow: inset 0px 1px #969696, inset 0px -1px #6f6f6f; | 54 color: bbbbbb; |
100 background-image: -webkit-linear-gradient(#8b8b8b, #7d7d7d); | |
101 background-size: cover; | |
102 border-bottom-color: #5b5b5b; | |
103 border-top-color: #a4a4a4; | |
104 } | 55 } |
OLD | NEW |