| /* 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%; |
| } |
| |
| .key-down, |
| .key-up { |
| border-radius: 4px; |
| border: 1px solid rgba(0, 0, 0, 0.3); |
| padding: 2px; |
| margin-right: 2px; |
| } |
| |
| .key-up { |
| background-color: #DFD; |
| } |
| |
| .key-up::before { |
| content: "-"; |
| } |
| |
| .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; |
| } |