summaryrefslogtreecommitdiffstats
path: root/remoting/tools/javascript_key_tester/main.css
blob: 0c6f4e5ac49f9bca8625bc49e968a8d287c179b2 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/* 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 {
  width: 50%;
  height: 100%;
  overflow-y: auto;
  float: left;
}

#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;
}

.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;
}