Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(29)

Side by Side Diff: ui/keyboard/resources/main.css

Issue 249493002: Reskins the Compact and System VK to look closer to the IME VK. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Changed background-image to background-color. Created 6 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « ui/keyboard/resources/images/up.svg ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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-color: rgba(0, 0, 255, 0.5);
35 0 -1px 1px rgba(213, 213, 213, 0.5);
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 } 35 }
44 36
45 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl], 37 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl],
46 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl] { 38 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl] {
47 color: lightblue; 39 color: blue;
48 } 40 }
49 41
50 /** TODO(rsadam@): Move these rules to kb-row once we uprev to latest Polymer.*/ 42 .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 { 43 .dark {
88 font-size: 70%; 44 font-size: 70%;
89 } 45 }
90 46
91 .dark:not(.active) { 47 .dark:not(.active),
92 -webkit-box-shadow: inset 0px 1px #313131, inset 0px -1px #202020; 48 :not(kb-altkey-set) > :not(.dark).active {
93 background-color: #222222; 49 background-color: #dddddd;
94 border-bottom-color: #1c1c1c;
95 border-top-color: #4f4f4f;
96 } 50 }
97 51
98 :not(kb-altkey-set) > .active { 52 .space {
99 -webkit-box-shadow: inset 0px 1px #969696, inset 0px -1px #6f6f6f; 53 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 } 54 }
OLDNEW
« no previous file with comments | « ui/keyboard/resources/images/up.svg ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698