1/* Copyright (c) 2014 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  box-sizing: border-box;
7  -webkit-font-smoothing:antialiased;
8}
9
10html, body {
11  background: #FAFAFA;
12  color: #444;
13  font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
14  height: 100%;
15  line-height: 1.35;
16  margin: 0;
17  padding: 0;
18  width: 100%;
19  overflow: hidden;
20}
21
22#listener {
23  bottom: 0;
24  left: 0;
25  position: absolute;
26  right: 0;
27  top: 0;
28}
29
30#rendererContainer {
31  height: 100%;
32  line-height: 0;
33  width: 100%;
34}
35
36#title-box {
37  background-color: rgba(255, 255, 255, 0.9);
38  max-width: 300px;
39  padding: 8px;
40  position: absolute;
41  -webkit-user-select: none;
42  z-index: 1000;
43}
44
45#title-box-toggle-button {
46  color: #000;
47  cursor: pointer;
48  float: right;
49  padding: 8px;
50  text-align: center;
51  transition: color 0.2s;
52}
53
54#title-box-toggle-button.open {
55  text-decoration: none;
56}
57
58#title-box-toggle-button:hover {
59  color: #888;
60}
61
62#title-box-expando {
63  clear: both;
64  overflow: hidden;
65  transition: max-height 0.6s ease-in-out;
66  max-height: 0;
67}
68
69#title-box-expando.open {
70  max-height: 800px;
71}
72
73h1 {
74  border-bottom: 1px solid #bbb;
75  color: #666;
76  font-size: 110%;
77  font-weight: 600;
78  letter-spacing: -0.05em;
79  margin: 0;
80  padding-bottom: 0.1em;
81  text-align: center;
82}
83
84h2 {
85  color: #666;
86  font-size: 100%;
87  font-weight: 600;
88  letter-spacing: -0.05em;
89  margin: 0;
90  padding-bottom: 0.1em;
91  text-align: center;
92}
93
94a {
95  color: #00A3D9;
96}
97
98.small {
99  font-size: 75%;
100}
101
102button {
103  background: #777;
104  color: #FFF;
105  width: calc(100% - 20px);
106  height: 35px;
107  border-radius: 6px;
108  border: none;
109  margin-left: 10px;
110  margin-right: 10px;
111  margin-bottom: 4px;
112  cursor: pointer;
113  text-align: center;
114  transition: background-color 0.2s ease-out;
115}
116
117button:hover {
118  background: #333;
119}
120
121#loading-cover{
122  background-color: rgba(255, 255, 255, 0.8);
123  bottom: 0;
124  display: block;
125  left: 0;
126  position: fixed;
127  right: 0;
128  top: 0;
129  width: 100%;
130  z-index: 1001;
131}
132
133#message {
134  bottom: 0;
135  font-size: 44px;
136  height: calc(1em + 80px);  /* not perfect, but pretty close. */
137  left: 0;
138  margin: auto;
139  position: absolute;
140  right: 0;
141  text-align: center;
142  top: 0;
143  z-index: 10;
144}
145
146#statusField {
147  color: #444;
148  font-weight: 700;
149  width: 100%;
150  letter-spacing: -0.06em;
151}
152
153#progress {
154  margin: 20px auto;
155  width: 300px;
156  border-radius: 8px;
157  background: #FFF;
158  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
159}
160
161.progress-bar {
162  border-radius: 8px;
163  height: 40px;
164  background: #6DD900;
165  transition: width 0.1s ease-out;
166}
167