src/ui/keyboard/resources/main.css

   1 /*
   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
   4  found in the LICENSE file.
   5 */
   6
   7 @font-face {
   8   font-family: roboto-bold;
   9   src: url(roboto_bold.ttf);
  10 }
  11
  12 /**
  13  * TODO(rsadam@): Remove all these rules once we switch to native
  14  * shadow dom.
  15  */
  16 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl],
  17 kb-keyboard.alt-active kb-modifier-key[char=Alt] {
  18   color: lightblue;
  19 }
  20
  21 kb-keyboard[keyset="upper"] kb-shift-key.dark /deep/ .key {
  22   background-image: url('images/shift-filled.svg');
  23 }
  24
  25 kb-keyboard[keyset="lower"] kb-shift-key /deep/ .key{
  26   background-image: url('images/shift.svg');
  27 }
  28
  29 /**
  30 * Controls whether the shift key should be highlighted or not.
  31 */
  32 kb-keyboard.caps-locked kb-shift-key.dark /deep/
  33     .shift-light {
  34   -webkit-box-shadow: 0 1px 1px rgba(213, 213, 213, 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 }
  44
  45 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl],
  46 kb-keyboard.ctrl-active kb-modifier-key[char=Ctrl]  {
  47   color: lightblue;
  48 }
  49
  50 /** TODO(rsadam@): Move these rules to kb-row once we uprev to latest Polymer.*/
  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 {
  88   font-size: 70%;
  89 }
  90
  91 .dark:not(.active) {
  92   -webkit-box-shadow: inset 0px 1px #313131, inset 0px -1px #202020;
  93   background-color: #222222;
  94   border-bottom-color: #1c1c1c;
  95   border-top-color: #4f4f4f;
  96 }
  97
  98 :not(kb-altkey-set) > .active {
  99   -webkit-box-shadow: inset 0px 1px #969696, inset 0px -1px #6f6f6f;
 100   background-image: -webkit-linear-gradient(#8b8b8b, #7d7d7d);
 101   background-size: cover;
 102   border-bottom-color: #5b5b5b;
 103   border-top-color: #a4a4a4;
 104 }