| /* 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. */ |
| |
| * { |
| box-sizing: border-box; |
| -webkit-font-smoothing:antialiased; |
| } |
| |
| html, body { |
| background: #FAFAFA; |
| color: #444; |
| font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; |
| height: 100%; |
| line-height: 1.35; |
| margin: 0; |
| padding: 0; |
| width: 100%; |
| overflow: hidden; |
| } |
| |
| #listener { |
| bottom: 0; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| #rendererContainer { |
| height: 100%; |
| line-height: 0; |
| width: 100%; |
| } |
| |
| #title-box { |
| background-color: rgba(255, 255, 255, 0.9); |
| max-width: 300px; |
| padding: 8px; |
| position: absolute; |
| -webkit-user-select: none; |
| z-index: 1000; |
| } |
| |
| #title-box-toggle-button { |
| color: #000; |
| cursor: pointer; |
| float: right; |
| padding: 8px; |
| text-align: center; |
| transition: color 0.2s; |
| } |
| |
| #title-box-toggle-button.open { |
| text-decoration: none; |
| } |
| |
| #title-box-toggle-button:hover { |
| color: #888; |
| } |
| |
| #title-box-expando { |
| clear: both; |
| overflow: hidden; |
| transition: max-height 0.6s ease-in-out; |
| max-height: 0; |
| } |
| |
| #title-box-expando.open { |
| max-height: 800px; |
| } |
| |
| h1 { |
| border-bottom: 1px solid #bbb; |
| color: #666; |
| font-size: 110%; |
| font-weight: 600; |
| letter-spacing: -0.05em; |
| margin: 0; |
| padding-bottom: 0.1em; |
| text-align: center; |
| } |
| |
| h2 { |
| color: #666; |
| font-size: 100%; |
| font-weight: 600; |
| letter-spacing: -0.05em; |
| margin: 0; |
| padding-bottom: 0.1em; |
| text-align: center; |
| } |
| |
| a { |
| color: #00A3D9; |
| } |
| |
| .small { |
| font-size: 75%; |
| } |
| |
| button { |
| background: #777; |
| color: #FFF; |
| width: calc(100% - 20px); |
| height: 35px; |
| border-radius: 6px; |
| border: none; |
| margin-left: 10px; |
| margin-right: 10px; |
| margin-bottom: 4px; |
| cursor: pointer; |
| text-align: center; |
| transition: background-color 0.2s ease-out; |
| } |
| |
| button:hover { |
| background: #333; |
| } |
| |
| #loading-cover{ |
| background-color: rgba(255, 255, 255, 0.8); |
| bottom: 0; |
| display: block; |
| left: 0; |
| position: fixed; |
| right: 0; |
| top: 0; |
| width: 100%; |
| z-index: 1001; |
| } |
| |
| #message { |
| bottom: 0; |
| font-size: 44px; |
| height: calc(1em + 80px); /* not perfect, but pretty close. */ |
| left: 0; |
| margin: auto; |
| position: absolute; |
| right: 0; |
| text-align: center; |
| top: 0; |
| z-index: 10; |
| } |
| |
| #statusField { |
| color: #444; |
| font-weight: 700; |
| width: 100%; |
| letter-spacing: -0.06em; |
| } |
| |
| #progress { |
| margin: 20px auto; |
| width: 300px; |
| border-radius: 8px; |
| background: #FFF; |
| box-shadow: 0 3px 8px rgba(0,0,0,0.3); |
| } |
| |
| .progress-bar { |
| border-radius: 8px; |
| height: 40px; |
| background: #6DD900; |
| transition: width 0.1s ease-out; |
| } |