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

Side by Side Diff: ui/keyboard/resources/elements/kb-key.html

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 | « no previous file | ui/keyboard/resources/elements/kb-keyboard.html » ('j') | 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 2013 The Chromium Authors. All rights reserved. 2 -- Copyright 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 <polymer-element name="kb-key" extends="kb-key-base" attributes="image keyCode 7 <polymer-element name="kb-key" extends="kb-key-base" attributes="image keyCode
8 keyName shiftModifier sound stretch weight"> 8 keyName shiftModifier sound stretch weight">
9 <template> 9 <template>
10 <style> 10 <style>
11 :host { 11 :host {
12 background-color: #3b3b3e; 12 background-color: #ffffff;
13 border-radius: 2px; 13 border-radius: 1px;
14 border-style: solid; 14 border-style: solid;
15 border-width: 1px 0px; 15 border-width: 0px 0px;
16 color: #ffffff; 16 color: #666666;
17 font-family: roboto-bold; 17 font-family: 'Droid Sans';
18 font-weight: 300; 18 font-weight: 100;
19 } 19 }
20 20
21 :host .key { 21 :host .key {
22 background-image: none; 22 background-image: none;
23 background-position: center; 23 background-position: center;
24 background-repeat: no-repeat; 24 background-repeat: no-repeat;
25 background-size: contain; 25 background-size: contain;
26 bottom: 0; 26 bottom: 0;
27 height: 1.2em; 27 height: 1.2em;
28 left: 0; 28 left: 0;
(...skipping 22 matching lines...) Expand all
51 } 51 }
52 52
53 :host([image].hide-keyboard) .key { 53 :host([image].hide-keyboard) .key {
54 height: 100%; 54 height: 100%;
55 } 55 }
56 56
57 :host([image].search) .key { 57 :host([image].search) .key {
58 height: 80%; 58 height: 80%;
59 } 59 }
60 60
61 :host .hint,
62 :host([invert]) key {
63 color: #bbbbbb;
64 }
65
61 :host .hint { 66 :host .hint {
62 color: #313131;
63 font-size: 70%; 67 font-size: 70%;
64 position: absolute; 68 position: absolute;
65 right: 7%; 69 right: 7%;
66 top: 5%; 70 top: 5%;
67 } 71 }
68 72
69 :host([invert]) .key {
70 color: #313131;
71 }
72
73 :host([invert]) .hint { 73 :host([invert]) .hint {
74 color: #ffffff; 74 color: #666666;
75 } 75 }
76 76
77 :host(.dark) { 77 :host(.dark) {
78 font-size: 70%; 78 font-size: 70%;
79 } 79 }
80 80
81 :host(.active) { 81 :host(.active) {
82 -webkit-box-shadow: inset 0px 1px #969696, inset 0px -1px #6f6f6f; 82 background-color: #dddddd;
83 background-image: -webkit-linear-gradient(#8b8b8b, #7d7d7d);
84 background-size: cover; 83 background-size: cover;
85 border-bottom-color: #5b5b5b;
86 border-top-color: #a4a4a4;
87 } 84 }
88 85
89 :host(.dark:not(.active)) { 86 :host(.dark:not(.active)) {
90 -webkit-box-shadow: inset 0px 1px #313131, inset 0px -1px #202020; 87 background-color: #555555;
91 background-color: #222222;
92 border-bottom-color: #1c1c1c;
93 border-top-color: #4f4f4f;
94 } 88 }
95 89
96 :host(:not(.dark):not(.active)) { 90 :host(:not(.dark):not(.active)) {
97 -webkit-box-shadow: inset 0px 1px #6f6f6f, inset 0px -1px #565656; 91 background-color: #ffffff;
98 background-image: -webkit-linear-gradient(#636363, #5b5b5b);
99 background-size: cover; 92 background-size: cover;
100 border-bottom-color: #4a4a4a;
101 border-top-color: #878787;
102 } 93 }
103 </style> 94 </style>
104 <div id="key" class="key"> 95 <div id="key" class="key">
105 <content></content> 96 <content></content>
106 </div> 97 </div>
107 <div class="hint" part="hint">{{hintText}}</div> 98 <div class="hint" part="hint">{{hintText}}</div>
108 </template> 99 </template>
109 </polymer-element> 100 </polymer-element>
110 101
111 <!-- Special keys --> 102 <!-- Special keys -->
112 <polymer-element name="kb-abc-key" class="symbol dark" char="Invalid" 103 <polymer-element name="kb-abc-key" class="symbol dark" char="Invalid"
113 extends="kb-key" weight="125"> 104 extends="kb-key" weight="125">
114 </polymer-element> 105 </polymer-element>
115 106
116 <polymer-element name="kb-hide-keyboard-key" class="hide-keyboard dark" 107 <polymer-element name="kb-hide-keyboard-key" class="hide-keyboard dark"
117 align="center" attributes="showMenu" char="Invalid" extends="kb-key"> 108 align="center" attributes="showMenu" char="Invalid" extends="kb-key">
118 </polymer-element> 109 </polymer-element>
OLDNEW
« no previous file with comments | « no previous file | ui/keyboard/resources/elements/kb-keyboard.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698