1:root {
2  font: caption;
3}
4
5html {
6  background-color: #111;
7}
8
9body {
10  font-family: Arial, sans-serif;
11  color: white;
12  max-width: 600px;
13  margin: 30px auto 0;
14  box-shadow: 0 2px 3px black;
15  background-color: #3C3E40;
16}
17
18h1 {
19  margin: 0;
20  padding: 20px;
21  background-color: rgba(0,0,0,0.12);
22  background-image: radial-gradient(ellipse farthest-corner at center top , rgb(159, 223, 255), rgba(101, 203, 255, 0.3)), radial-gradient(ellipse farthest-side at center top , rgba(101, 203, 255, 0.4), rgba(101, 203, 255, 0));
23  background-size: 100% 2px, 100% 5px;
24  background-repeat: no-repeat;
25  border-bottom: 1px solid rgba(0,0,0,0.1);
26}
27
28form {
29  display: inline-block;
30}
31
32label {
33  display: block;
34  margin: 10px;
35}
36
37label > span {
38  display: inline-block;
39  min-width: 150px;
40  text-align: right;
41  margin-right: 10px;
42}
43
44#submit {
45  float: right;
46}
47
48input:invalid {
49  box-shadow: 0 0 2px 2px #F06;
50}
51
52section {
53  min-height: 160px;
54  margin: 60px 20px;
55  display: none; /* By default, hidden */
56}
57
58.error-message {
59  color: red;
60}
61
62.error-message:not(.active) {
63  display: none;
64}
65
66body:not(.actors-mode):not(.connecting) > #connection-form {
67  display: block;
68}
69
70body.actors-mode > #actors-list {
71  display: block;
72}
73
74body.connecting > #connecting {
75  display: block;
76}
77
78#connecting {
79  text-align: center;
80}
81
82#connecting > p > img {
83  vertical-align: top;
84}
85
86.actors {
87  padding-left: 0;
88}
89
90.actors > a {
91  display: block;
92  margin: 5px;
93  padding: 5px;
94  color: white;
95}
96
97.remote-process {
98  font-style: italic;
99  opacity: 0.8;
100}
101
102footer {
103  padding: 10px;
104  background-color: rgba(0,0,0,0.12);
105  border-top: 1px solid rgba(0,0,0,0.1);
106  font-size: small;
107}
108
109footer > a,
110footer > a:visited {
111  color: white;
112}
113