1/* Copyright (c) 2013 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 margin: 0; 12 padding: 0; 13 width: 100%; 14 height: 100%; 15 background: #FAFAFA; 16 font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; 17 line-height: 1.35; 18 color: #444; 19} 20 21body { 22 display: flex; 23 flex-direction: row; 24} 25 26nav { 27 width: 230px; 28 background: #F3F3F3; 29 border-right: 1px solid #CCCCCC; 30 flex: 0 0 auto; 31} 32 33nav h1 { 34 font-family: 'Open Sans'; 35 font-weight: 300; 36 color: #555; 37 margin: 0; 38 padding: 35px 0 20px 10px; 39 font-size: 22px; 40 border-bottom: 1px solid #CCC; 41} 42 43nav ul { 44 list-style: none; 45 padding: 0; 46 margin: 0; 47} 48 49nav ul li { 50 height: 52px; 51 line-height: 52px; 52 border-top: 1px solid #FFF; 53 border-bottom: 1px solid #CCC; 54 position: relative; 55 overflow: hidden; 56} 57 58nav ul li a { 59 padding-left: 50px; 60 display: block; 61 width: 100%; 62 height: 100%; 63 background-image: url(icons.png); 64 background-repeat: no-repeat; 65 background-color: #F3F3F3; 66 background-size: 30px 420px; 67 color: #444; 68 text-decoration: none; 69 transition: background-color 0.2s ease-out, color 0.3s ease-in-out; 70} 71 72nav ul li#lua a { 73 background-position: 14px 16px; 74} 75 76nav ul li#bullet a { 77 background-position: 14px -52px; 78} 79 80nav ul li#earth a { 81 background-position: 14px -108px; 82} 83 84nav ul li#life a { 85 background-position: 13px -166px; 86} 87 88nav ul li#voronoi a { 89 background-position: 15px -230px; 90} 91 92nav ul li#smoothlife a { 93 background-position: 13px -290px; 94} 95 96nav ul li#cube a { 97 background-position: 13px -350px; 98} 99 100nav ul li a:hover, 101nav ul li a.active { 102 background-color: #444; 103 color: #FFF; 104 transition: background-color 0.1s ease-out, color 0.2s ease-in-out; 105} 106 107nav ul li:last-child:after { 108 content: ''; 109 width: 100%; 110 height: 0; 111 border-bottom: 1px solid #FFF; 112 position: absolute; 113 left: 0; 114 bottom: -2px; 115} 116 117section { 118 padding: 25px; 119 flex: 1 1 auto; 120 display: flex; 121 flex-direction: column; 122} 123 124section iframe { 125 box-shadow: 0 1px 1px rgba(0,0,0,0.3); 126 width: 100%; 127 height: 100%; 128 background: #FFF; 129 flex: 1 1 auto; 130} 131 132.error { 133 background-color: #ccc; 134 position: fixed; 135 left: 0; 136 top: 0; 137 right: 0; 138 bottom: 0; 139} 140 141.error h1 { 142 font-family: 'Open Sans'; 143 font-weight: 300; 144 color: #555; 145 margin: 0; 146 padding: 20px 0 20px 10px; 147 font-size: 22px; 148 border-bottom: 1px solid #CCC; 149 margin-bottom: 20px; 150} 151 152.error .message { 153 background-color: #fff; 154 padding: 20px; 155 margin: auto; 156 position: absolute; 157 left: 0; 158 right: 0; 159 top: 0; 160 bottom: 0; 161 width: 500px; 162 height: 350px; 163 box-shadow: 0 1px 1px rgba(0,0,0,0.3); 164} 165 166.error img { 167 float: right; 168 margin-left: 20px; 169} 170 171.error[hidden] { 172 display: none; 173} 174 175/** Demo **/ 176 177.demo { 178 background: #FFF; 179 flex-direction: column; 180} 181 182.demo header { 183 flex: 0 1 auto; 184 padding: 15px 25px; 185} 186 187.demo header h1 { 188 margin: 0; 189 font-family: 'Open Sans'; 190 font-weight: 300; 191 color: #666; 192 font-size: 62px; 193 letter-spacing: -0.05em; 194} 195 196.demo p { 197 margin: 0 0 1em 0; 198 font-size: 17px; 199} 200 201.demo ul { 202 margin: 0; 203} 204 205.demo section { 206 padding: 0 25px 25px 25px; 207 display: flex; 208 flex-direction: row; 209} 210 211.demo .intro { 212 max-width: 360px; 213 padding-right: 40px; 214} 215 216.demo div { 217 flex: 1 1 auto; 218} 219 220.demo div.Demo-body, 221.demo div.Demo-content { 222 display: flex; 223 flex-direction: column; 224} 225 226.demo div.Demo-body { 227 border: 1px solid #DFDFDF; 228 position: relative; 229 padding: 10px; 230} 231 232.demo div.Demo-content embed { 233 flex: 1 1 auto; 234} 235 236.demo p { 237 font-size: 20px; 238} 239 240.demo a { 241 color: #00A3D9; 242} 243 244.demo p.note { 245 color: #666; 246 font-style: italic; 247 font-size: 14px; 248} 249 250.demo .panel-info { 251 margin-top: 20px; 252 padding-top: 20px; 253 border-top: 1px solid #CCC; 254} 255 256.demo .panel-body { 257 margin-bottom: 10px; 258 padding-bottom: 10px; 259} 260 261.demo tr { 262 font-size: 14px; 263 height: 30px; 264 line-height: 30px; 265} 266 267.demo td { 268 padding: 4px; 269} 270 271.demo tr:nth-child(2n) { 272 background: #f4f4f4; 273} 274 275.demo td.name { 276 font-weight: bold; 277} 278 279.demo h2 { 280 font-size: 16px; 281 font-family: 'Open Sans'; 282 font-weight: 700; 283 margin: 0 0 0.2em 0; 284 color: #777; 285 letter-spacing: -0.06em; 286} 287 288.demo #loading-cover{ 289 display: block; 290 position: fixed; 291 left: 0; 292 top: 0; 293 right: 0; 294 bottom: 0; 295 width: 100%; 296 background-color: rgba(255, 255, 255, 0.8); 297} 298 299.demo #message { 300 position:absolute; 301 text-align: center; 302 width: 100%; 303 height: 100%; 304 z-index:10; 305 top:0; 306 left:0; 307} 308 309.demo #statusField { 310 padding-top: 200px; 311 color: #444; 312 font-size: 44px; 313 font-weight: 700; 314 font-family: 'Open Sans'; 315 text-align: center; 316 width: 100%; 317 letter-spacing: -0.06em; 318} 319 320.demo #terminal { 321 width: 100%; 322 height: 100%; 323 position: relative; 324 display: flex; 325} 326 327.demo #terminal iframe { 328 width: auto; 329 height: auto; 330} 331 332.demo #rendererContainer { 333 width: calc(100% - 20px); 334 height: calc(100% - 20px); 335 position: absolute; 336} 337 338.no-pointer-events { 339 pointer-events: none; 340} 341 342.demo button { 343 background: #777; 344 color: #FFF; 345 width: 49%; 346 height: 35px; 347 border-radius: 6px; 348 border: none; 349 margin-bottom: 4px; 350 cursor: pointer; 351 transition: background-color 0.2s ease-out; 352} 353 354.demo button.block { 355 display: block; 356} 357 358.demo button.one-third { 359 width: 32%; 360} 361 362.demo button:hover { 363 background: #333; 364} 365 366.demo { 367 min-height: 645px; 368} 369 370.demo #progress { 371 margin: 20px auto; 372 width: 300px; 373 border-radius: 8px; 374 background: #FFF; 375 box-shadow: 0 3px 8px rgba(0,0,0,0.3); 376} 377 378.progress-bar { 379 border-radius: 8px; 380 height: 40px; 381 background: #6DD900; 382 transition: width 0.1s ease-out; 383} 384 385.demo .credit { 386 margin-top: 20px; 387 font-size: 10px; 388 color: #AAA; 389} 390