Skip to content

GitLab

T
tangled
Commit 3bdfaaed authored by rsadam@chromium.org's avatar rsadam@chromium.org
Browse files
Options

Reskins the Compact and System VK to look closer to the IME VK. Since some of... 

Reskins the Compact and System VK to look closer to the IME VK. Since some of the new icon assets are missing, continue to use the old assets (with color changed) for consistency.


BUG=364468

Review URL: https://codereview.chromium.org/249493002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@265782 0039d316-1c4b-4281-b951-d872f2087c98
parent eb59ad1f
Hide whitespace changes
Inline Side-by-side
Showing with 42 additions and 106 deletions
ui/keyboard/resources/elements/kb-key.html
View file @ 3bdfaaed
...@@ -9,13 +9,13 @@ ...@@ -9,13 +9,13 @@
<template> <template>
<style> <style>
:host { :host {
background-color: #3b3b3e; background-color: #ffffff;
border-radius: 2px; border-radius: 1px;
border-style: solid; border-style: solid;
border-width: 1px 0px; border-width: 0px 0px;
color: #ffffff; color: #666666;
font-family: roboto-bold; font-family: 'Droid Sans';
font-weight: 300; font-weight: 100;
} }
:host .key { :host .key {
...@@ -58,20 +58,20 @@ ...@@ -58,20 +58,20 @@
height: 80%; height: 80%;
} }
:host .hint,
:host([invert]) key {
color: #bbbbbb;
}
:host .hint { :host .hint {
color: #313131;
font-size: 70%; font-size: 70%;
position: absolute; position: absolute;
right: 7%; right: 7%;
top: 5%; top: 5%;
} }
:host([invert]) .key {
color: #313131;
}
:host([invert]) .hint { :host([invert]) .hint {
color: #ffffff; color: #666666;
} }
:host(.dark) { :host(.dark) {
...@@ -79,26 +79,17 @@ ...@@ -79,26 +79,17 @@
} }
:host(.active) { :host(.active) {
-webkit-box-shadow: inset 0px 1px #969696, inset 0px -1px #6f6f6f; background-color: #dddddd;
background-image: -webkit-linear-gradient(#8b8b8b, #7d7d7d);
background-size: cover; background-size: cover;
border-bottom-color: #5b5b5b;
border-top-color: #a4a4a4;
} }
:host(.dark:not(.active)) { :host(.dark:not(.active)) {
-webkit-box-shadow: inset 0px 1px #313131, inset 0px -1px #202020; background-color: #555555;
background-color: #222222;
border-bottom-color: #1c1c1c;
border-top-color: #4f4f4f;
} }
:host(:not(.dark):not(.active)) { :host(:not(.dark):not(.active)) {
-webkit-box-shadow: inset 0px 1px #6f6f6f, inset 0px -1px #565656; background-color: #ffffff;
background-image: -webkit-linear-gradient(#636363, #5b5b5b);
background-size: cover; background-size: cover;
border-bottom-color: #4a4a4a;
border-top-color: #878787;
} }
</style> </style>
<div id="key" class="key"> <div id="key" class="key">
......
ui/keyboard/resources/elements/kb-keyboard.html
View file @ 3bdfaaed
...@@ -15,8 +15,7 @@ ...@@ -15,8 +15,7 @@
<style> <style>
:host { :host {
-webkit-user-select: none; -webkit-user-select: none;
background-image: -webkit-linear-gradient(#282828, #000000); background-color: #eeeeee;
background-size: cover;
bottom: 0; bottom: 0;
cursor: default; cursor: default;
left: 0; left: 0;
......
ui/keyboard/resources/elements/kb-shift-key.html
View file @ 3bdfaaed
...@@ -19,13 +19,9 @@ ...@@ -19,13 +19,9 @@
} }
.shift-light { .shift-light {
-webkit-box-shadow: inset 0 1px #101010, inset 0 -1px #444444; background-color: #ffffff;
background-image: -webkit-linear-gradient(#101010, #000000); border: none;
border: solid; height: 0.2em;
border-bottom-color: #1d1d1d;
border-top-color: #2d2d2d;
border-width: 1px 0;
height: 0.3em;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
width: 1.8em; width: 1.8em;
......
ui/keyboard/resources/images/back.svg
View file @ 3bdfaaed
...@@ -24,4 +24,4 @@ ...@@ -24,4 +24,4 @@
d="m 0,0 -6.845,0 2.8,2.8 -1.132,1.132 -4.697,-4.699 4.688,-4.764 1.14,1.122 L -6.81,-1.6 0,-1.6 0,0 z" d="m 0,0 -6.845,0 2.8,2.8 -1.132,1.132 -4.697,-4.699 4.688,-4.764 1.14,1.122 L -6.81,-1.6 0,-1.6 0,0 z"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
id="path14" id="path14"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" /></g></g></svg> style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" /></g></g></svg>
\ No newline at end of file
ui/keyboard/resources/images/backspace.svg
View file @ 3bdfaaed
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</sodipodi:namedview> </sodipodi:namedview>
<g id="layer1" inkscape:label="Layer 1" inkscape:groupmode="layer"> <g id="layer1" inkscape:label="Layer 1" inkscape:groupmode="layer">
<g id="g1722" transform="matrix(1.25,0,0,-1.25,31.657411,29.649286)"> <g id="g1722" transform="matrix(1.25,0,0,-1.25,31.657411,29.649286)">
<path id="path1724" inkscape:connector-curvature="0" fill="#FFFFFF" d="M-0.626,0.41l-3.181,3.177l-3.176-3.18l-1.106,1.106 <path id="path1724" inkscape:connector-curvature="0" fill="#666666" d="M-0.626,0.41l-3.181,3.177l-3.176-3.18l-1.106,1.106
l3.179,3.181l-3.179,3.179l1.106,1.107l3.176-3.18l3.181,3.18l1.103-1.107L-2.7,4.692l3.177-3.18L-0.626,0.41z M-18.792,4.47 l3.179,3.181l-3.179,3.179l1.106,1.107l3.176-3.18l3.181,3.18l1.103-1.107L-2.7,4.692l3.177-3.18L-0.626,0.41z M-18.792,4.47
l6.248-6.231H6.54V10.8h-19.084L-18.792,4.47z"/> l6.248-6.231H6.54V10.8h-19.084L-18.792,4.47z"/>
</g> </g>
......
ui/keyboard/resources/images/down.svg
View file @ 3bdfaaed
...@@ -24,4 +24,4 @@ ...@@ -24,4 +24,4 @@
d="M 0,0 3.57,-3.57 7.199,0" d="M 0,0 3.57,-3.57 7.199,0"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
id="path14" id="path14"
style="fill:none;stroke:#ffffff;stroke-width:1.60000002;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g></g></svg> style="fill:none;stroke:#666666;stroke-width:1.60000002;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g></g></svg>
\ No newline at end of file
ui/keyboard/resources/images/hide-keyboard.svg
View file @ 3bdfaaed
...@@ -4,11 +4,11 @@ ...@@ -4,11 +4,11 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve"> width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<symbol id="ic_x5F_keyboard_x0D_" viewBox="0 -24 24 24"> <symbol id="ic_x5F_keyboard_x0D_" viewBox="0 -24 24 24">
<path fill="#FFFFFF" d="M21-5H3C1.896-5,1.01-5.896,1.01-7L1-18c0-1.104,0.896-2,2-2h18c1.104,0,2,0.896,2,2v11 <path fill="#666666" d="M21-5H3C1.896-5,1.01-5.896,1.01-7L1-18c0-1.104,0.896-2,2-2h18c1.104,0,2,0.896,2,2v11
C23-5.896,22.104-5,21-5z M11-8h2v-2h-2V-8z M11-11h2v-2h-2V-11z M8-8h2v-2H8V-8z M8-11h2v-2H8V-11z M7-13H5v2h2V-13z M7-10H5v2h2 C23-5.896,22.104-5,21-5z M11-8h2v-2h-2V-8z M11-11h2v-2h-2V-11z M8-8h2v-2H8V-8z M8-11h2v-2H8V-11z M7-13H5v2h2V-13z M7-10H5v2h2
V-10z M16-17H8v2h8V-17z M16-13h-2v2h2V-13z M16-10h-2v2h2V-10z M19-13h-2v2h2V-13z M19-10h-2v2h2V-10z"/> V-10z M16-17H8v2h8V-17z M16-13h-2v2h2V-13z M16-10h-2v2h2V-10z M19-13h-2v2h2V-13z M19-10h-2v2h2V-10z"/>
<polygon fill="none" points="24,-24 0,-24 0,0 24,0 "/> <polygon fill="none" points="24,-24 0,-24 0,0 24,0 "/>
</symbol> </symbol>
<use xlink:href="#ic_x5F_keyboard_x0D_" width="24" height="24" id="XMLID_144_" y="-24" transform="matrix(1 0 0 -1 12 10)" overflow="visible"/> <use xlink:href="#ic_x5F_keyboard_x0D_" width="24" height="24" id="XMLID_144_" y="-24" transform="matrix(1 0 0 -1 12 10)" overflow="visible"/>
<polygon fill="#FFFFFF" points="21,32 27,32 24,35 "/> <polygon fill="#666666" points="21,32 27,32 24,35 "/>
</svg> </svg>
ui/keyboard/resources/images/left.svg
View file @ 3bdfaaed
...@@ -24,4 +24,4 @@ ...@@ -24,4 +24,4 @@
d="M 0,0 -3.57,-3.57 0,-7.199" d="M 0,0 -3.57,-3.57 0,-7.199"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
id="path14" id="path14"
style="fill:none;stroke:#ffffff;stroke-width:1.60000002;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g></g></svg> style="fill:none;stroke:#666666;stroke-width:1.60000002;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g></g></svg>
\ No newline at end of file
ui/keyboard/resources/images/return.svg
View file @ 3bdfaaed
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</sodipodi:namedview> </sodipodi:namedview>
<g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1"> <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">
<g id="g1718" transform="matrix(1.25,0,0,-1.25,39.764197,19.091786)"> <g id="g1718" transform="matrix(1.25,0,0,-1.25,39.764197,19.091786)">
<path id="path1720" inkscape:connector-curvature="0" fill="#FFFFFF" d="M0.457,0.572v-3.598h-18v6.295l-9.936-7.197l9.936-7.193 <path id="path1720" inkscape:connector-curvature="0" fill="#666666" d="M0.457,0.572v-3.598h-18v6.295l-9.936-7.197l9.936-7.193
v6.295h19.8v5.398H0.457z"/> v6.295h19.8v5.398H0.457z"/>
</g> </g>
</g> </g>
......
ui/keyboard/resources/images/right.svg
View file @ 3bdfaaed
...@@ -24,4 +24,4 @@ ...@@ -24,4 +24,4 @@
d="M 0,0 3.57,3.57 0,7.199" d="M 0,0 3.57,3.57 0,7.199"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
id="path14" id="path14"
style="fill:none;stroke:#ffffff;stroke-width:1.60000002;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g></g></svg> style="fill:none;stroke:#666666;stroke-width:1.60000002;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g></g></svg>
\ No newline at end of file
ui/keyboard/resources/images/search.svg
View file @ 3bdfaaed
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</sodipodi:namedview> </sodipodi:namedview>
<g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1"> <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">
<g id="g1682" transform="matrix(1.25,0,0,-1.25,36.051257,32.440573)"> <g id="g1682" transform="matrix(1.25,0,0,-1.25,36.051257,32.440573)">
<path id="path1684" inkscape:connector-curvature="0" fill="#FFFFFF" d="M0.114-0.8l-5.342,5.346h-1.102L-6.819,5.03 <path id="path1684" inkscape:connector-curvature="0" fill="#666666" d="M0.114-0.8l-5.342,5.346h-1.102L-6.819,5.03
c2.267,2.885,2.064,6.957-0.52,9.551c-2.802,2.799-7.329,2.799-10.138,0c-2.786-2.809-2.788-7.338,0-10.139 c2.267,2.885,2.064,6.957-0.52,9.551c-2.802,2.799-7.329,2.799-10.138,0c-2.786-2.809-2.788-7.338,0-10.139
c2.598-2.58,6.629-2.792,9.557-0.513l0.486-0.485V2.342l5.338-5.347c0.324-0.32,1.108-0.198,1.756,0.447 c2.598-2.58,6.629-2.792,9.557-0.513l0.486-0.485V2.342l5.338-5.347c0.324-0.32,1.108-0.198,1.756,0.447
C0.307-1.908,0.441-1.126,0.114-0.8 M-8.772,5.897L-8.772,5.897h-0.02V5.878c-2.006-1.991-5.24-1.987-7.244,0.008 C0.307-1.908,0.441-1.126,0.114-0.8 M-8.772,5.897L-8.772,5.897h-0.02V5.878c-2.006-1.991-5.24-1.987-7.244,0.008
......
ui/keyboard/resources/images/shift-filled.svg
View file @ 3bdfaaed
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</sodipodi:namedview> </sodipodi:namedview>
<g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1"> <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">
<g id="g1726" transform="matrix(1.25,0,0,-1.25,24.286964,10.049732)"> <g id="g1726" transform="matrix(1.25,0,0,-1.25,24.286964,10.049732)">
<path id="path1728" inkscape:connector-curvature="0" fill="#FFFFFF" d="M-0.229-0.686l-7.02-7.051l-7.021-7.054h8.134v-6.845 <path id="path1728" inkscape:connector-curvature="0" fill="#666666" d="M-0.229-0.686l-7.02-7.051l-7.021-7.054h8.134v-6.845
H5.256v6.845h8.555L6.795-7.736L-0.229-0.686z"/> H5.256v6.845h8.555L6.795-7.736L-0.229-0.686z"/>
</g> </g>
</g> </g>
......
ui/keyboard/resources/images/shift.svg
View file @ 3bdfaaed
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</sodipodi:namedview> </sodipodi:namedview>
<g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1"> <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">
<g id="g1726" transform="matrix(1.25,0,0,-1.25,24.286964,10.049732)"> <g id="g1726" transform="matrix(1.25,0,0,-1.25,24.286964,10.049732)">
<path id="path1728" inkscape:connector-curvature="0" fill="#FFFFFF" d="M-0.229-0.686l-7.02-7.051l-7.021-7.054h8.134v-6.845 <path id="path1728" inkscape:connector-curvature="0" fill="#666666" d="M-0.229-0.686l-7.02-7.051l-7.021-7.054h8.134v-6.845
H5.256v6.845h8.555L6.795-7.736L-0.229-0.686z M-0.229-3.873l5.428-5.45l3.198-3.216H5.256h-2.25v-2.25v-4.595h-6.891v4.595v2.25 H5.256v6.845h8.555L6.795-7.736L-0.229-0.686z M-0.229-3.873l5.428-5.45l3.198-3.216H5.256h-2.25v-2.25v-4.595h-6.891v4.595v2.25
h-2.25h-2.72l3.201,3.215L-0.229-3.873z"/> h-2.25h-2.72l3.201,3.215L-0.229-3.873z"/>
</g> </g>
......
ui/keyboard/resources/images/tab.svg
View file @ 3bdfaaed
...@@ -9,11 +9,11 @@ ...@@ -9,11 +9,11 @@
</sodipodi:namedview> </sodipodi:namedview>
<g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1"> <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">
<g id="g1736" transform="matrix(1.25,0,0,-1.25,38.01192,16.333282)"> <g id="g1736" transform="matrix(1.25,0,0,-1.25,38.01192,16.333282)">
<path id="path1738" inkscape:connector-curvature="0" fill="#FFFFFF" d="M1.422-0.841h-15.969v-5.077l-8.011,5.802l8.011,5.805 <path id="path1738" inkscape:connector-curvature="0" fill="#666666" d="M1.422-0.841h-15.969v-5.077l-8.011,5.802l8.011,5.805
V0.611H1.422V-0.841z"/> V0.611H1.422V-0.841z"/>
</g> </g>
<g id="g1742" transform="matrix(1.25,0,0,-1.25,6.434791,29.565652)"> <g id="g1742" transform="matrix(1.25,0,0,-1.25,6.434791,29.565652)">
<path id="path1744" inkscape:connector-curvature="0" fill="#FFFFFF" d="M1.421-0.841h15.97v5.076l8.011-5.801L17.391-7.37v5.076 <path id="path1744" inkscape:connector-curvature="0" fill="#666666" d="M1.421-0.841h15.97v5.076l8.011-5.801L17.391-7.37v5.076
H1.421V-0.841z"/> H1.421V-0.841z"/>
</g> </g>
</g> </g>
......
ui/keyboard/resources/images/up.svg
View file @ 3bdfaaed
...@@ -24,4 +24,4 @@ ...@@ -24,4 +24,4 @@
d="M 0,0 -3.57,3.57 -7.199,0" d="M 0,0 -3.57,3.57 -7.199,0"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
id="path14" id="path14"
style="fill:none;stroke:#ffffff;stroke-width:1.60000002;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g></g></svg> style="fill:none;stroke:#666666;stroke-width:1.60000002;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g></g></svg>
\ No newline at end of file
ui/keyboard/resources/main.css
View file @ 3bdfaaed
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
*/ */
kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl], kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl],
kb-keyboard.alt-active kb-modifier-key[char=Alt] { kb-keyboard.alt-active kb-modifier-key[char=Alt] {
color: lightblue; background-color: #bbbbbb;
} }
kb-keyboard[keyset="upper"] kb-shift-key.dark /deep/ .key { kb-keyboard[keyset="upper"] kb-shift-key.dark /deep/ .key {
...@@ -31,74 +31,24 @@ kb-keyboard[keyset="lower"] kb-shift-key /deep/ .key{ ...@@ -31,74 +31,24 @@ kb-keyboard[keyset="lower"] kb-shift-key /deep/ .key{
*/ */
kb-keyboard.caps-locked kb-shift-key.dark /deep/ kb-keyboard.caps-locked kb-shift-key.dark /deep/
.shift-light { .shift-light {
-webkit-box-shadow: 0 1px 1px rgba(213, 213, 213, 0.5), background-color: rgba(0, 0, 255, 0.5);
0 -1px 1px rgba(213, 213, 213, 0.5);
background-image: -webkit-linear-gradient(#d5d5d5, #d5d5d5);
border: none;
height: 0.2em;
}
kb-keyboard.caps-locked kb-shift-key.dark /deep/
.shift-light-wrapper {
bottom: 2px;
} }
kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl], kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl],
kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl] { kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl] {
color: lightblue; color: blue;
}
/** TODO(rsadam@): Move these rules to kb-row once we uprev to latest Polymer.*/
kb-row:nth-child(2) kb-key:not(.dark):not(.active){
-webkit-box-shadow: inset 0px 1px #666666, inset 0px -1px #4c4c4c;
background-image: -webkit-linear-gradient(#5a5a5a, #515151);
background-size: cover;
border-bottom-color: #414141;
border-top-color: #7f7f7f;
}
kb-row:nth-child(3) kb-key:not(.dark):not(.active){
-webkit-box-shadow: inset 0px 1px #5d5d5d, inset 0px -1px #444444;
background-image: -webkit-linear-gradient(#505050, #494949);
background-size: cover;
border-bottom-color: #3a3a3a;
border-top-color: #787878;
}
kb-row:nth-child(n+3) kb-key:not(.dark):not(.active){
-webkit-box-shadow: inset 0px 1px #565656, inset 0px -1px #434343;
background-image: -webkit-linear-gradient(#484848, #474747);
background-size: cover;
border-bottom-color: #393939;
border-top-color: #717171;
}
kb-row:nth-child(2) kb-key:not([invert]) /deep/ .hint {
color: #2C2C2C;
}
kb-row:nth-child(3) kb-key:not([invert]) /deep/ .hint {
color: #272727;
}
kb-row:nth-child(n+3) kb-key:not([invert]) /deep/ .hint {
color: #232323;
} }
.space,
.dark { .dark {
font-size: 70%; font-size: 70%;
} }
.dark:not(.active) { .dark:not(.active),
-webkit-box-shadow: inset 0px 1px #313131, inset 0px -1px #202020; :not(kb-altkey-set) > :not(.dark).active {
background-color: #222222; background-color: #dddddd;
border-bottom-color: #1c1c1c;
border-top-color: #4f4f4f;
} }
:not(kb-altkey-set) > .active { .space {
-webkit-box-shadow: inset 0px 1px #969696, inset 0px -1px #6f6f6f; color: bbbbbb;
background-image: -webkit-linear-gradient(#8b8b8b, #7d7d7d);
background-size: cover;
border-bottom-color: #5b5b5b;
border-top-color: #a4a4a4;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment