1 /* Copyright 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 color: rgba(0, 0, 0, .87); 8 font-family: Helvetica, sans-serif; 9 font-size: 14px; 10 margin: 0; 11 padding: 0; 12 } 13 14 a { 15 color: rgb(67, 133, 244); 16 text-decoration: none; 17 } 18 19 body { 20 background: #ddd; 21 } 22 23 h1 { 24 font-size: 34px; 25 font-weight: normal; 26 line-height: 40px; 27 } 28 29 h2 { 30 font-size: 16px; 31 font-weight: normal; 32 } 33 34 h4 { 35 font-size: 14px; 36 } 37 38 div.container { 39 background: #fff; 40 box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); 41 height: 600px; 42 width: 800px; 43 } 44 45 div.header { 46 background: url(../images/header-optin-1x.png) no-repeat; 47 height: 240px; 48 vertical-align: bottom; 49 } 50 51 div.header-text { 52 height: 240px; 53 padding: 60px; 54 } 55 56 div.header-text h1 { 57 color: #fff; 58 margin-top: 44px; 59 } 60 61 div.header-text h2 { 62 color: #fff; 63 margin-top: 20px; 64 } 65 66 div.content { 67 height: 240px; 68 margin: 60px 60px auto 60px; 69 } 70 71 .close { 72 background: url(../images/bt-close-1x.png); 73 float: right; 74 height: 60px; 75 width: 60px; 76 } 77 78 79 button.grayed-out { 80 color: rgba(0, 0, 0, .28); 81 } 82 83 .col-3 { 84 color: rgba(0, 0, 0, .54); 85 line-height: 24px; 86 width: 504px; 87 } 88 89 .col-3 h4 { 90 line-height: 100%; 91 margin-bottom: 27px; 92 } 93 94 .col-2 { 95 color: rgba(0, 0, 0, .54); 96 float: left; 97 line-height: 24px; 98 width: 332px; 99 } 100 101 .col-2 h4 { 102 line-height: 100%; 103 margin-top: 27px; 104 } 105 106 .col-spacing { 107 float: left; 108 height: 160px; 109 width: 16px; 110 } 111 112 a.link-button { 113 display: inline-block; 114 font-size: 14px; 115 margin-top: 22px; 116 text-decoration: none; 117 text-transform: uppercase; 118 } 119 120 div.buttonbar { 121 background: rgba(0, 0, 0, .06); 122 height: 60px; 123 padding: 12px 60px; 124 } 125 126 .buttonbar button { 127 background: none; 128 border: none; 129 border-radius: 2px; 130 float: right; 131 height: 36px; 132 margin-left: 8px; 133 min-width: 88px; 134 padding: 8px; 135 text-transform: uppercase; 136 } 137 138 button.primary { 139 color: rgb(67, 133, 244); 140 } 141 142 .v-spacing-for-no-subheading { 143 height: 43px; 144 } 145 146 .train { 147 clear: both; 148 margin-bottom: 24px; 149 white-space: nowrap; 150 } 151 152 .train .icon { 153 display: inline-block; 154 height: 24px; 155 margin-right: 16px; 156 vertical-align: top; 157 width: 24px; 158 } 159 160 .train .text { 161 display: inline-block; 162 line-height: 24px; 163 vertical-align: top; 164 width: 292px; 165 } 166 167 .train.listening .text { 168 color: rgba(0, 0, 0, .87); 169 } 170 171 .train.not-started .text { 172 color: rgba(0, 0, 0, .54); 173 } 174 175 .train.recorded .text { 176 color: rgba(66, 133, 244, 1); 177 } 178 179 .train.error .text { 180 color: rgb(213, 0, 0); 181 } 182 183 .train.listening .icon { 184 background: url(../images/placeholder-loader-1x.png) no-repeat; 185 } 186 187 .train.not-started .icon { 188 background: url(../images/ic-check-gray-1x.png) no-repeat; 189 } 190 191 .train.recorded .icon { 192 background: url(../images/ic-check-blue-1x.png) no-repeat; 193 } 194 195 .train.error .icon { 196 background: url(../images/placeholder-loader-error-1x.png) no-repeat; 197 } 198 199 .mic { 200 background: url(../images/mic-1x.png) no-repeat; 201 height: 80px; 202 left: 666px; 203 position: absolute; 204 top: 200px; 205 width: 80px; 206 } 207 208 .check { 209 clear: both; 210 height: 24px; 211 margin-bottom: 24px; 212 } 213 214 .check .icon { 215 background: url(../images/ic-check-blue-1x.png) no-repeat; 216 display: inline-block; 217 height: 24px; 218 margin-right: 16px; 219 vertical-align: top; 220 width: 24px; 221 } 222 223 .check .text { 224 color: rgba(0, 0, 0, .54); 225 display: inline-block; 226 height: 24px; 227 line-height: 24px; 228 vertical-align: top; 229 } 230