| OLD | NEW |
| (Empty) |
| 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 | |
| 10 html, 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 | |
| 21 body { | |
| 22 display: flex; | |
| 23 flex-direction: row; | |
| 24 } | |
| 25 | |
| 26 nav { | |
| 27 width: 230px; | |
| 28 background: #F3F3F3; | |
| 29 border-right: 1px solid #CCCCCC; | |
| 30 flex: 0 0 auto; | |
| 31 } | |
| 32 | |
| 33 nav 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 | |
| 43 nav ul { | |
| 44 list-style: none; | |
| 45 padding: 0; | |
| 46 margin: 0; | |
| 47 } | |
| 48 | |
| 49 nav 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 | |
| 58 nav 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 | |
| 72 nav ul li#lua a { | |
| 73 background-position: 14px 16px; | |
| 74 } | |
| 75 | |
| 76 nav ul li#bullet a { | |
| 77 background-position: 14px -52px; | |
| 78 } | |
| 79 | |
| 80 nav ul li#earth a { | |
| 81 background-position: 14px -108px; | |
| 82 } | |
| 83 | |
| 84 nav ul li#life a { | |
| 85 background-position: 13px -166px; | |
| 86 } | |
| 87 | |
| 88 nav ul li#voronoi a { | |
| 89 background-position: 15px -230px; | |
| 90 } | |
| 91 | |
| 92 nav ul li#smoothlife a { | |
| 93 background-position: 13px -290px; | |
| 94 } | |
| 95 | |
| 96 nav ul li#cube a { | |
| 97 background-position: 13px -350px; | |
| 98 } | |
| 99 | |
| 100 nav ul li a:hover, | |
| 101 nav 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 | |
| 107 nav 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 | |
| 117 section { | |
| 118 padding: 25px; | |
| 119 flex: 1 1 auto; | |
| 120 display: flex; | |
| 121 flex-direction: column; | |
| 122 } | |
| 123 | |
| 124 section 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 } | |
| OLD | NEW |