remoting/tools/javascript_key_tester/main.css

/* Copyright (c) 2014 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 {
  height: calc(100% - 12px);
  overflow: auto;
}

html {
  height: 100%;
}

.summary-log-container {
  height: 100%;
  overflow-y: auto;
}

#text-log-container {
  position: fixed;
  top: 32px;
  left: 16px;
  right: 16px;
  bottom: 32px;
  border: 1px solid gray;
  box-shadow: 0px 4px 10px 4px rgba(0,0,0,0.3);
  background-color: white;
  overflow: scroll;
}

#text-log {
  padding: 8px;
}

#pnacl-listener {
  height: 100px;
}

#pnacl-plugin {
  height: 100%;
  width: 100%;
  background-color: gray;
}

.selectable {
  -webkit-user-select: text;
  cursor: text;
}

.key-div {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  padding: 2px;
  margin-right: 2px;
  display: inline-block;
}

.char-event {
  background-color: #DDF;
}

.key-up {
  background-color: #DFD;
}

.key-up::before {
  content: "\2011";  /** non-breaking hyphen */
}

.key-down {
  background-color: #FDD;
}

.key-down::before {
  content: "+";
}

.key-down.unreleased {
  background-color: #F77;
}

.key-down.unreleased::before {
  content: "!";
}

.chord-div {
  margin-top: 8px;
}

.chord-div:not(.all-keys-released)::after {
  content: "..."
}

.chord-div.all-keys-released::after {
  content: " \2714";  /* tick */
  color: green;
}

.chord-div.some-keys-still-pressed::after {
  content: " \2716";  /* cross */
  color: red;
}

.controls {
  position: absolute;
  right: 8px;
  top: 8px;
}