chrome/browser/resources/chromeos/keyboard_overlay.css

/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

body {
  -webkit-user-select: none;
  background: #fff;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.keyboard-overlay-keyboard {
  background: -webkit-linear-gradient(#484848, #252525) no-repeat;
  background-color: #252525;
  border-radius: 6px;
  font-family: 'Noto Sans UI', ui-sans;
}

.keyboard-overlay-instructions {
  -webkit-box-orient: vertical;
  background: -webkit-linear-gradient(rgb(51, 76, 126), rgb(13, 23, 43));
  border: 2px solid rgb(87, 108, 207);
  border-radius: 5px;
  color: #fff;
  display: -webkit-box;
  position: absolute;
  vertical-align: middle;
  z-index: 100;
}

.keyboard-overlay-instructions-text {
  -webkit-box-flex: 3;
  margin: 13px auto 0;
  max-width: 20em;
  text-align: center;
  vertical-align: middle;
}

.keyboard-overlay-instructions-hide-text {
  -webkit-box-flex: 2;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.keyboard-overlay-learn-more-text {
  -webkit-box-flex: 1;
  font-size: 90%;
  margin: 0 auto 13px;
  text-align: center;
  text-decoration: underline;
  vertical-align: middle;
}

.keyboard-overlay-learn-more-text a {
  color: #fff;
}

.keyboard-overlay-key {
  -webkit-box-orient: vertical;
  background-color: rgba(24, 24, 24, 0.9);
  border: 2px solid #7f7f7f;
  border-radius: 4px;
  color: rgb(151, 151, 151);
  display: -webkit-box;
  font-size: 75%;
  font-weight: bold;
  position: absolute;
}

.keyboard-overlay-key.is-shortcut {
  background: -webkit-linear-gradient(rgba(61, 61, 61, 0.8),
                                      rgba(27, 27, 27, 0.8));
  border-color: #fafafa;
  color: #9e9e9e;
}

.keyboard-overlay-key.is-shortcut.modifier-shift {
  border-color: rgb(97, 186, 100);
}

.keyboard-overlay-key.is-shortcut.modifier-ctrl {
  border-color: rgb(93, 128, 199);
}

.keyboard-overlay-key.is-shortcut.modifier-alt {
  border-color: rgb(184, 84, 84);
}

.keyboard-overlay-key.is-shortcut.modifier-search {
  border-color: rgb(204, 204, 80);
}

.keyboard-overlay-key.is-shortcut.modifier-shift.modifier-ctrl {
  border-color: rgb(121, 172, 143);
}

.keyboard-overlay-key.is-shortcut.modifier-shift.modifier-alt {
  border-color: rgb(191, 189, 121);
}

.keyboard-overlay-key.is-shortcut.modifier-ctrl.modifier-alt {
  border-color: rgb(158, 84, 206);
}

.keyboard-overlay-key.is-shortcut.modifier-shift.modifier-ctrl.modifier-alt {
  border-color: #7f7f7f;
}

.keyboard-overlay-key.pressed {
  border-color: #fff;
  color: #fff;
}

.keyboard-overlay-key.pressed.is-shift {
  background: -webkit-linear-gradient(rgb(68, 161, 66), rgb(62, 95, 55));
}

.keyboard-overlay-key.pressed.is-shift.modifier-ctrl {
  background: -webkit-linear-gradient(rgb(66, 161, 67), rgb(46, 92, 83));
}

.keyboard-overlay-key.pressed.is-shift.modifier-alt {
  background: -webkit-linear-gradient(rgb(69, 163, 67), rgb(81, 81, 52));
}

.keyboard-overlay-key.pressed.is-shift.modifier-ctrl.modifier-alt {
  background: -webkit-linear-gradient(rgb(82, 161, 42), rgb(79, 77, 46));
}

.keyboard-overlay-key.pressed.is-ctrl {
  background: -webkit-linear-gradient(rgb(31, 55, 162), rgb(25, 38, 90));
}

.keyboard-overlay-key.pressed.is-ctrl.modifier-shift {
  background: -webkit-linear-gradient(rgb(67, 159, 165), rgb(30, 55, 96));
}

.keyboard-overlay-key.pressed.is-ctrl.modifier-alt {
  background: -webkit-linear-gradient(rgb(115, 54, 144), rgb(34, 37, 94));
}

.keyboard-overlay-key.pressed.is-ctrl.modifier-shift.modifier-alt {
  background: -webkit-linear-gradient(rgb(115, 54, 144), rgb(33, 37, 93));
}

.keyboard-overlay-key.pressed.is-alt {
  background: -webkit-linear-gradient(rgb(132, 44, 42), rgb(84, 30, 28));
}

.keyboard-overlay-key.pressed.is-alt.modifier-shift {
  background: -webkit-linear-gradient(top left, rgb(116, 94, 49),
                                                rgb(85, 36, 30));
}

.keyboard-overlay-key.pressed.is-alt.modifier-ctrl {
  background: -webkit-linear-gradient(rgb(118, 54, 143), rgb(82, 33, 40));
}

.keyboard-overlay-key.pressed.is-alt.modifier-shift.modifier-ctrl {
  background: -webkit-linear-gradient(top left, rgb(115, 95, 41),
                                                rgb(80, 36, 27));
}

.keyboard-overlay-key.pressed.is-search {
  background: -webkit-linear-gradient(rgb(242, 242, 126), rgb(186, 186, 52));
}

.keyboard-overlay-shortcut-text {
  -webkit-box-flex: 1;
  -webkit-box-ordinal-group: 1;
  color: #fff;
  padding: 1px 3px 0;
  text-align: center;
  text-shadow: #000 0 0 2px;
}

.keyboard-overlay-key-text {
  -webkit-box-ordinal-group: 2;
  padding: 0 3px 2px;
  text-align: center;
}

.keyboard-overlay-key.is-shortcut .keyboard-overlay-key-text {
  opacity: 0.25;
}