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