chrome/browser/resources/chromeos/keyboard_overlay.css

   1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2  * Use of this source code is governed by a BSD-style license that can be
   3  * found in the LICENSE file.
   4  */
   5
   6 body {
   7   -webkit-user-select: none;
   8   background: #fff;
   9   font-size: 100%;
  10   margin: 0;
  11   overflow: hidden;
  12   padding: 0;
  13 }
  14
  15 .keyboard-overlay-keyboard {
  16   background: -webkit-linear-gradient(#484848, #252525) no-repeat;
  17   background-color: #252525;
  18   border-radius: 6px;
  19 }
  20
  21 .keyboard-overlay-instructions {
  22   -webkit-box-orient: vertical;
  23   background: -webkit-linear-gradient(rgb(51, 76, 126), rgb(13, 23, 43));
  24   border: 2px solid rgb(87, 108, 207);
  25   border-radius: 5px;
  26   color: #fff;
  27   display: -webkit-box;
  28   position: absolute;
  29   vertical-align: middle;
  30   z-index: 100;
  31 }
  32
  33 .keyboard-overlay-instructions-text {
  34   -webkit-box-flex: 3;
  35   margin: 13px auto 0;
  36   max-width: 20em;
  37   text-align: center;
  38   vertical-align: middle;
  39 }
  40
  41 .keyboard-overlay-instructions-hide-text {
  42   -webkit-box-flex: 2;
  43   font-weight: bold;
  44   text-align: center;
  45   vertical-align: middle;
  46 }
  47
  48 .keyboard-overlay-learn-more-text {
  49   -webkit-box-flex: 1;
  50   font-size: 90%;
  51   margin: 0 auto 13px;
  52   text-align: center;
  53   text-decoration: underline;
  54   vertical-align: middle;
  55 }
  56
  57 .keyboard-overlay-learn-more-text a {
  58   color: #fff;
  59 }
  60
  61 .keyboard-overlay-key {
  62   -webkit-box-orient: vertical;
  63   background-color: rgba(24, 24, 24, 0.9);
  64   border: 2px solid #7f7f7f;
  65   border-radius: 4px;
  66   color: rgb(151, 151, 151);
  67   display: -webkit-box;
  68   font-size: 80%;
  69   font-weight: bold;
  70   position: absolute;
  71 }
  72
  73 .keyboard-overlay-key.is-shortcut {
  74   background: -webkit-linear-gradient(rgba(61, 61, 61, 0.8),
  75                                       rgba(27, 27, 27, 0.8));
  76   border-color: #fafafa;
  77   color: #9e9e9e;
  78 }
  79
  80 .keyboard-overlay-key.is-shortcut.modifier-shift {
  81   border-color: rgb(97, 186, 100);
  82 }
  83
  84 .keyboard-overlay-key.is-shortcut.modifier-ctrl {
  85   border-color: rgb(93, 128, 199);
  86 }
  87
  88 .keyboard-overlay-key.is-shortcut.modifier-alt {
  89   border-color: rgb(184, 84, 84);
  90 }
  91
  92 .keyboard-overlay-key.is-shortcut.modifier-search {
  93   border-color: rgb(204, 204, 80);
  94 }
  95
  96 .keyboard-overlay-key.is-shortcut.modifier-shift.modifier-ctrl {
  97   border-color: rgb(121, 172, 143);
  98 }
  99
 100 .keyboard-overlay-key.is-shortcut.modifier-shift.modifier-alt {
 101   border-color: rgb(191, 189, 121);
 102 }
 103
 104 .keyboard-overlay-key.is-shortcut.modifier-ctrl.modifier-alt {
 105   border-color: rgb(158, 84, 206);
 106 }
 107
 108 .keyboard-overlay-key.is-shortcut.modifier-shift.modifier-ctrl.modifier-alt {
 109   border-color: #7f7f7f;
 110 }
 111
 112 .keyboard-overlay-key.pressed {
 113   border-color: #fff;
 114   color: #fff;
 115 }
 116
 117 .keyboard-overlay-key.pressed.is-shift {
 118   background: -webkit-linear-gradient(rgb(68, 161, 66), rgb(62, 95, 55));
 119 }
 120
 121 .keyboard-overlay-key.pressed.is-shift.modifier-ctrl {
 122   background: -webkit-linear-gradient(rgb(66, 161, 67), rgb(46, 92, 83));
 123 }
 124
 125 .keyboard-overlay-key.pressed.is-shift.modifier-alt {
 126   background: -webkit-linear-gradient(rgb(69, 163, 67), rgb(81, 81, 52));
 127 }
 128
 129 .keyboard-overlay-key.pressed.is-shift.modifier-ctrl.modifier-alt {
 130   background: -webkit-linear-gradient(rgb(82, 161, 42), rgb(79, 77, 46));
 131 }
 132
 133 .keyboard-overlay-key.pressed.is-ctrl {
 134   background: -webkit-linear-gradient(rgb(31, 55, 162), rgb(25, 38, 90));
 135 }
 136
 137 .keyboard-overlay-key.pressed.is-ctrl.modifier-shift {
 138   background: -webkit-linear-gradient(rgb(67, 159, 165), rgb(30, 55, 96));
 139 }
 140
 141 .keyboard-overlay-key.pressed.is-ctrl.modifier-alt {
 142   background: -webkit-linear-gradient(rgb(115, 54, 144), rgb(34, 37, 94));
 143 }
 144
 145 .keyboard-overlay-key.pressed.is-ctrl.modifier-shift.modifier-alt {
 146   background: -webkit-linear-gradient(rgb(115, 54, 144), rgb(33, 37, 93));
 147 }
 148
 149 .keyboard-overlay-key.pressed.is-alt {
 150   background: -webkit-linear-gradient(rgb(132, 44, 42), rgb(84, 30, 28));
 151 }
 152
 153 .keyboard-overlay-key.pressed.is-alt.modifier-shift {
 154   background: -webkit-linear-gradient(top left, rgb(116, 94, 49),
 155                                                 rgb(85, 36, 30));
 156 }
 157
 158 .keyboard-overlay-key.pressed.is-alt.modifier-ctrl {
 159   background: -webkit-linear-gradient(rgb(118, 54, 143), rgb(82, 33, 40));
 160 }
 161
 162 .keyboard-overlay-key.pressed.is-alt.modifier-shift.modifier-ctrl {
 163   background: -webkit-linear-gradient(top left, rgb(115, 95, 41),
 164                                                 rgb(80, 36, 27));
 165 }
 166
 167 .keyboard-overlay-key.pressed.is-search {
 168   background: -webkit-linear-gradient(rgb(242, 242, 126), rgb(186, 186, 52));
 169 }
 170
 171 .keyboard-overlay-shortcut-text {
 172   -webkit-box-flex: 1;
 173   -webkit-box-ordinal-group: 1;
 174   color: #fff;
 175   padding: 1px 3px 0;
 176   text-align: center;
 177   text-shadow: #000 0 0 2px;
 178 }
 179
 180 .keyboard-overlay-key-text {
 181   -webkit-box-ordinal-group: 2;
 182   padding: 0 3px 2px;
 183   text-align: center;
 184 }
 185
 186 .keyboard-overlay-key.is-shortcut .keyboard-overlay-key-text {
 187   opacity: 0.25;
 188 }