src/native_client_sdk/src/gonacl_appengine/static/styles/style.css

   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 }