jax 1.1.1 → 2.0.0

data/.gitignore

@@ -1,3 +1,4 @@
+features/rerun.txt
 *.gem
 .bundle
 Gemfile.lock
@@ -10,3 +11,6 @@ doc
 tmp/
 guides/output
 /pkg/
+_lib
+_spec
+.rbx

data/.rvmrc

@@ -1,7 +1,6 @@
-rvm use --create --install 1.9.2@webgl 2>&1
+rvm use --create --install 1.9.2@jax 2>&1
 
-# Bundle is available, non-custom config.
-if command -v bundle >/dev/null && ! [ -e .bundle ] ; then
+if ! [ -e .bundle ] ; then
   bundle install
   mkdir .bundle
 fi

data/.travis.yml

@@ -5,28 +5,14 @@
 rvm:
   - 1.8.7
   - 1.9.2
-  
-# Define how to run the tests (defaults to `bundle exec rake` or `rake` depending on whether you have a `Gemfile`)
-# script: "bundle exec rake rspec node"
+  - 1.9.3
+  - ree
+#  - jruby
+  - ruby-head
+  - rbx-2.0
 
-# Define tasks to be completed before and after tests run. Will allow folding of content on frontend
+  
 # before_script:
-#   - command_1
-#   - command_2
-
-# after_script:
-#   - command_1
-#   - command_2
-
-# Specify an ENV variable to run before: 'bundle install' and 'rake' (or your defined 'script')
-# env: "RAILS_ENV='test' "
-
-# Specify the recipients for email notification
-# notifications:
-#   recipients:
-#     - email-address-1
-#     - email-address-2
+#   - sh -e /etc/init.d/xvfb start
 
-# Disable email notifications
-# notifications:
-#   disabled: true
+env: "SKIP_WEBGL=1 "

data/README.md

@@ -1,6 +1,6 @@
-## JAX [![Build Status](http://travis-ci.org/sinisterchipmunk/jax.png)](http://travis-ci.org/sinisterchipmunk/jax)
+## Jax [![Build Status](http://travis-ci.org/sinisterchipmunk/jax.png)](http://travis-ci.org/sinisterchipmunk/jax)
 
-Jax is a framework for developing rich WebGL-enabled applications using JavaScript and Ruby.
+Jax is a framework for developing rich WebGL-enabled applications using JavaScript and Ruby. It can be used within a Ruby on Rails application, or as a completely stand-alone WebGL development environment.
 
 ## Live Demos
 

data/Rakefile

@@ -1,7 +1,3 @@
-# used to flag auto-compile. Just makes my life easier.
-$JAX_DEVELOPMENT = true
-$JAX_RAKE = true
-
 begin
   require 'bundler'
   Bundler::GemHelper.install_tasks
@@ -10,20 +6,33 @@ rescue LoadError
   puts " *** You don't seem to have Bundler installed. ***"
   puts "     Please run the following command:"
   puts
-  puts "       gem install bundler --version=1.0.15"
+  puts "       gem install bundler"
   exit
-end
-
-DEPENDENCIES = %w(jasmine sprockets treetop bluecloth)
-DEPENDENCIES.each do |dep|
-  begin
-    require dep
-  rescue LoadError
+rescue Bundler::GemNotFound
+  # this runs recursively forever under jruby, so special case failure for that.
+  if ENV['NO_MORE_ATTEMPTS'] || RUBY_PLATFORM == "java"
+    raise
+  else
+    ENV['NO_MORE_ATTEMPTS'] = '1'
     system("bundle", "install")
     exec("bundle", "exec", "rake", *ARGV)
   end
 end
 
+require 'cucumber/rake/task'
+Cucumber::Rake::Task.new(:cucumber) do |t|
+  t.cucumber_opts = ["-f", "pretty", "-f", "rerun", "-o", "features/rerun.txt", "-t", "~@wip"]
+  unless ENV['FEATURE']
+    if !ENV['ALL'] &&
+      File.file?(rerun = File.expand_path("features/rerun.txt", File.dirname(__FILE__))) &&
+      (rerun = File.read(rerun).strip).length > 0
+      t.cucumber_opts << rerun.split(/\s/)
+    else
+      t.cucumber_opts << "features"
+    end
+  end
+end
+
 # pdoc is a different beast because the released gem seems to be quite dated,
 # and is incompatible with Ruby 1.9.2. We'll grab the latest from git, instead.
 begin
@@ -37,15 +46,8 @@ rescue LoadError
   require File.join(File.dirname(__FILE__), 'vendor/pdoc/lib/pdoc')
 end
 
-load 'jasmine/tasks/jasmine.rake'
-require File.expand_path("lib/jax/monkeypatch/jasmine", File.dirname(__FILE__))
-
 require File.join(File.dirname(__FILE__), "lib/jax")
 JAX_ROOT = File.dirname(__FILE__)
-# put a dummy Application in place
-class Development < Jax::Application
-end
-
 
 desc "list all TODO items"
 task :todo do
@@ -81,51 +83,6 @@ task :flagged do
   Rake::Task['hacks'].invoke
 end
 
-desc "compile Jax"
-task :compile do
-  # generate constants file
-  erb = ERB.new(File.read(File.join(File.dirname(__FILE__), "src/constants.yml.erb")))
-  File.open(File.join(File.dirname(__FILE__), "src/constants.yml"), "w") { |f| f.puts erb.result(binding) }
-  
-  secretary = Sprockets::Secretary.new(
-          :root => File.dirname(__FILE__),
-          :asset_root => "public",
-          :load_path => ["src"],
-          :source_files => ["src/jax.js", "builtin/**/*.js"]
-  )
-  jax_root = File.expand_path(File.dirname(__FILE__))
-  rm_rf File.join(jax_root, "dist")
-  mkdir_p File.join(jax_root, "dist")
-  secretary.concatenation.save_to File.join(jax_root, "dist/jax.js")
-  
-  mkdir_p File.join(jax_root, "tmp") unless File.directory?(File.join(jax_root, "tmp"))
-
-  # generate the built-in shaders for testing against (these are not added to the real jax dist because they are
-  # regenerated in the user's app)
-  rm File.join(jax_root, "tmp/shaders.js") if File.file?(File.join(jax_root, "tmp/shaders.js"))
-  File.open(File.join(jax_root, "tmp/shaders.js"), "w") do |f|
-    Jax.application.shaders.each { |shader| shader.save_to f }
-  end
-
-  puts "generated #{File.join(jax_root, "dist/jax.js")}"
-  
-  # make sure the app generator copies the correct jax
-  cp File.join(jax_root, "dist/jax.js"),
-     File.join(jax_root, "lib/jax/generators/app/templates/public/javascripts/jax.js")
-  
-  puts "(project built)"
-end
-
-desc "compile and minify Jax into dist/jax.js and dist/jax-min.js"
-task :minify => :compile do
-  puts "(minifying...)"
-  if system("java", "-jar", File.join(File.dirname(__FILE__), "vendor/yuicompressor-2.4.2.jar"), "dist/jax.js", "-o", "dist/jax-min.js")
-    puts "(done. saved to: dist/jax-min.js)"
-  else
-    puts "(Error while minifying!)"
-  end
-end
-
 ### HACK to add redcloth support to pdoc without changing pdoc itself
 class PDoc::Generators::Html::Website < PDoc::Generators::AbstractGenerator
   alias _set_markdown_parser set_markdown_parser
@@ -194,7 +151,8 @@ namespace :doc do
       end
     end
     
-    exit if errors
+    exit 1 if errors
+    puts "\e[32mdocumentation looks good\e[0m"
   end
   
   desc "build the Jax JavaScript documentation"
@@ -206,9 +164,9 @@ namespace :doc do
     @hide_links_to_api_docs = true
     header = ERB.new(File.read(File.expand_path("guides/partials/_top_nav.html.erb", File.dirname(__FILE__)))).result(binding)
     PDoc.run({
-      :source_files => (['src/jax.js', 'vendor/glmatrix/glMatrix.js'] +
+      :source_files => (['lib/assets/javascripts/jax.js', 'vendor/assets/javascripts/glMatrix.js'] +
 #                        Dir['vendor/ejs/src/**/*.js'] +
-                        Dir['src/jax/**/*.js']),
+                        Dir['lib/assets/javascripts/jax/**/*.js']),
       :destination  => "doc",
 #      :index_page   => 'src/README.markdown',
       :syntax_highlighter => 'coderay',
@@ -264,46 +222,120 @@ namespace :guides do
   end
 end
 
+desc "Compile jax to tmp/jax.js"
+task :compile do
+  require 'jax'
+  require 'jax/rails/application'
+  Jax::Rails::Application.initialize!
+  ::Rails.application.assets['jax/application.js'].write_to("tmp/jax.js")
+end
+
+desc "Start the Jax dev server"
+task :server do
+  require 'jax'
+  require 'jax/rails/application'
+  # moved public into spec to a) emphasize that it's for testing and b) avoid
+  # conflicting with normal 'public' dirs in current or future Rails versions.
+  Jax::Rails::Application.config.paths['public'] = "spec/fixtures/public"
+  Jax::Rails::Application.initialize!
+  server = Jax::Server.new *(ENV['quiet'] ? ["--quiet"] : [])
+  server.start
+end
+
 desc "Run javascript tests using node.js"
-task :node => :compile do
-  system("node", "spec/javascripts/node_helper.js")
+task :node do
+  unless ENV['SKIP_COMPILE']
+    Rake::Task['compile'].invoke
+  end
+  
+  unless system("node_modules/jasmine-node/bin/jasmine-node", "spec/javascripts")
+    raise "node specs failed"
+  end
 end
 
-FileUtils.rm_rf File.expand_path("spec/fixtures/tmp", File.dirname(__FILE__))
-require 'rake/testtask'
-desc "Run ruby tests using Test::Unit"
-# NOT WORKING due to isolation tests failing. Use test:isolated instead.
-Rake::TestTask.new("test_unit") do |t|
-  t.pattern = "{test,spec}/**/*_test.rb"
-  t.libs = ["./test", "./spec"].collect { |f| File.expand_path(f) }.select { |f| File.directory?(f) }
-#  t.verbose = true
-#  t.warning = true
+desc "Run test suite using selenium under Travis-CI"
+task :travis do
+  ENV['DISPLAY'] = ':99.0'
+  Rake::Task['jasmine'].invoke unless ENV["SKIP_WEBGL"]
 end
 
-namespace :test do
-  task :isolated do
-    dir = ENV["TEST_DIR"] || "**"
-    ruby = File.join(*RbConfig::CONFIG.values_at('bindir', 'RUBY_INSTALL_NAME'))
-    ENV['DO_NOT_ISOLATE'] = '1'
-    if ENV['TEST']
-      sh(ruby, '-Ispec', ENV['TEST'])
-    else
-      Dir["spec/#{dir}/*_test.rb"].each do |file|
-        next true if file.include?("fixtures")
-        sh(ruby, '-Ispec', File.expand_path(file, File.dirname(__FILE__)))
-      end
+desc "Run jasmine specs in browser"
+task :jasmine do
+  begin
+    server = nil
+    result = {}
+    th = Thread.new do
+      ENV['quiet'] = '1'
+      Rake::Task['server'].execute
+    end
+  
+    require 'selenium-webdriver'
+    driver = Selenium::WebDriver.for :firefox
+    driver.navigate.to "http://localhost:3000/jasmine"
+    
+    puts driver.title if ENV["DEBUG"]
+    if driver.title =~ /Exception/ # Rails exception occurred
+      puts driver.page_source
+      raise "Rails error occurred requesting jasmine specs"
+    end
+  
+    execjs = proc do |js|
+      puts "eval js: #{js}" if ENV['DEBUG']
+      result = driver.execute_script js
+      puts "     =>  #{result.inspect}" if ENV['DEBUG']
+      result
     end
+
+    until execjs.call("return jsApiReporter && jsApiReporter.finished") == true
+      sleep 0.1
+    end
+  
+    result = execjs.call(<<-end_code)
+    var result = jsApiReporter.results();
+    var failures = new Array();
+    var results = { };
+    for (var i in result) {
+      for (var j = 0; j < result[i].messages.length; j++) {
+        var msg = result[i].messages[j];
+        msg.toString = msg.toString();
+        msg.passed = msg.passed();
+        if (!msg.passed)
+          failures.push(msg);
+      }
+      results[result[i].result] = results[result[i].result] || 0;
+      results[result[i].result]++;
+    }
+    return { results: results, failure_messages: failures };
+    end_code
+  ensure
+    driver.quit if driver and driver.respond_to?(:quit)
+    # server.stop if server
   end
-end
   
+  passed = result["results"]["passed"].to_i
+  failed = result["results"]["failed"].to_i
+  total = passed + failed
+  green, red = "\e[32m", "\e[31m"
+  color = failed > 0 ? red : green
+  puts "#{color}#{total} jasmine specs: #{passed} passed, #{failed} failed\e[0m"
+  unless (failure_messages = result["failure_messages"]).empty?
+    failure_messages.each do |message|
+      puts message["message"]
+      puts
+      puts message["trace"]["stack"].split(/\n/).collect { |line|
+        line['@'] ? line.sub(/^.*\@/, '') : line }.reject { |line|
+        line['/jasmine.js?'] }.join("\n")
+    end
+    raise "jasmine specs failed"
+  end
+end
+
+require 'rspec/core/rake_task'
+RSpec::Core::RakeTask.new
 
 # 'Guides' tasks & code borrowed from Railties.
 desc 'Generate guides (for authors), use ONLY=foo to process just "foo.textile"'
 task :guides => 'guides:generate'
 
-task :jasmine => :compile
-# task :build   => [:compile, :minify] # make sure to minify the JS code before going to release
-task :build => :compile
-
 # disabled node tests for now, since Jax.DataRegion and friends break it. Rake jasmine instead.
-task :default => ['test:isolated']#, :node]
+task :default => ['spec', 'cucumber', 'travis', 'guides']

data/app/assets/javascripts/jax/controller-list.js.coffee

@@ -0,0 +1,22 @@
+#= require "./dom-helpers"
+
+{div, link} = Suite
+context = null
+
+controller = (name) ->
+  div link name, ->
+    context or= new Jax.Context "webgl"
+    # jax doesn't unload redirects to the same controller.
+    # Within a single app this is probably expected behavior.
+    # But, in this particular context, user most likely wants
+    # to reload the controller entirely. So we need to manually
+    # kick off the cleanup procedure.
+    context.unloadScene()
+    context.redirectTo name
+    false
+  
+$(document).ready ->
+  controller_list = $("#controller-list")[0]
+  
+  for controller_name in Jax.routes.getControllerNames()
+    $(controller_list).append controller(controller_name)

data/app/assets/javascripts/jax/dom-helpers.js.coffee

@@ -0,0 +1,17 @@
+window.Suite = {}
+
+Suite.text = (caption) ->
+  document.createTextNode caption
+
+Suite.link = (caption, callback) ->
+  _link = document.createElement 'a'
+  _link.setAttribute 'href', '#'
+  $(_link).append Suite.text(caption)
+  $(_link).click callback
+  _link
+
+Suite.div = (inner) ->
+  _div = document.createElement 'div'
+  $(_div).append inner
+  _div
+  

data/app/assets/javascripts/jax/jasmine_runner.js

@@ -0,0 +1,177 @@
+jasmine.TrivialReporter = function(doc) {
+  this.document = doc || document;
+  this.suiteDivs = {};
+  this.logRunningSpecs = false;
+};
+
+jasmine.TrivialReporter.prototype.createDom = function(type, attrs, childrenVarArgs) {
+  var el = document.createElement(type);
+
+  for (var i = 2; i < arguments.length; i++) {
+    var child = arguments[i];
+
+    if (typeof child === 'string') {
+      el.appendChild(document.createTextNode(child));
+    } else {
+      if (child) { el.appendChild(child); }
+    }
+  }
+
+  for (var attr in attrs) {
+    if (attr == "className") {
+      el[attr] = attrs[attr];
+    } else {
+      el.setAttribute(attr, attrs[attr]);
+    }
+  }
+
+  return el;
+};
+
+jasmine.TrivialReporter.prototype.reportRunnerStarting = function(runner) {
+  var showPassed, showSkipped;
+
+  showPassed  = document.getElementById("__jasmine_TrivialReporter_showPassed__");
+  showSkipped = document.getElementById("__jasmine_TrivialReporter_showSkipped__");
+  
+  this.outerDiv = document.getElementById('outer');
+  this.runnerMessageSpan = document.getElementById('runnerMessageSpan');
+  this.finishedAtSpan = document.getElementById('finishedAtSpan');
+  this.runnerDiv = document.getElementById('runner');
+  document.getElementById('jasmine-version').innerHTML = runner.env.versionString();
+
+  var suites = runner.suites();
+  for (var i = 0; i < suites.length; i++) {
+    var suite = suites[i];
+    var suiteDiv = this.createDom('div', { className: 'suite' },
+        this.createDom('a', { className: 'run_spec', href: '?spec=' + encodeURIComponent(suite.getFullName()) }, "run"),
+        this.createDom('a', { className: 'description', href: '?spec=' + encodeURIComponent(suite.getFullName()) }, suite.description));
+    this.suiteDivs[suite.id] = suiteDiv;
+    var parentDiv = this.outerDiv;
+    if (suite.parentSuite) {
+      parentDiv = this.suiteDivs[suite.parentSuite.id];
+    }
+    parentDiv.appendChild(suiteDiv);
+  }
+
+  this.startedAt = new Date();
+
+  var self = this;
+  showPassed.onclick = function(evt) {
+    if (showPassed.checked) {
+      self.outerDiv.className += ' show-passed';
+    } else {
+      self.outerDiv.className = self.outerDiv.className.replace(/ show-passed/, '');
+    }
+  };
+
+  showSkipped.onclick = function(evt) {
+    if (showSkipped.checked) {
+      self.outerDiv.className += ' show-skipped';
+    } else {
+      self.outerDiv.className = self.outerDiv.className.replace(/ show-skipped/, '');
+    }
+  };
+};
+
+jasmine.TrivialReporter.prototype.reportRunnerResults = function(runner) {
+  var results = runner.results();
+  var className = (results.failedCount > 0) ? "runner failed" : "runner passed";
+  this.runnerDiv.setAttribute("class", className);
+  //do it twice for IE
+  this.runnerDiv.setAttribute("className", className);
+  var specs = runner.specs();
+  var specCount = 0;
+  for (var i = 0; i < specs.length; i++) {
+    if (this.specFilter(specs[i])) {
+      specCount++;
+    }
+  }
+  var message = "" + specCount + " spec" + (specCount == 1 ? "" : "s" ) + ", " + results.failedCount + " failure" + ((results.failedCount == 1) ? "" : "s");
+  message += " in " + ((new Date().getTime() - this.startedAt.getTime()) / 1000) + "s";
+  this.runnerMessageSpan.replaceChild(this.createDom('a', { className: 'description', href: '?'}, message), this.runnerMessageSpan.firstChild);
+
+  this.finishedAtSpan.appendChild(document.createTextNode("Finished at " + new Date().toString()));
+};
+
+jasmine.TrivialReporter.prototype.reportSuiteResults = function(suite) {
+  var results = suite.results();
+  var status = results.passed() ? 'passed' : 'failed';
+  if (results.totalCount === 0) { // todo: change this to check results.skipped
+    status = 'skipped';
+  }
+  this.suiteDivs[suite.id].className += " " + status;
+};
+
+jasmine.TrivialReporter.prototype.reportSpecStarting = function(spec) {
+  if (this.logRunningSpecs) {
+    this.log('>> Jasmine Running ' + spec.suite.description + ' ' + spec.description + '...');
+  }
+};
+
+jasmine.TrivialReporter.prototype.reportSpecResults = function(spec) {
+  var results = spec.results();
+  var status = results.passed() ? 'passed' : 'failed';
+  if (results.skipped) {
+    status = 'skipped';
+  }
+  var specDiv = this.createDom('div', { className: 'spec '  + status },
+      this.createDom('a', { className: 'run_spec', href: '?spec=' + encodeURIComponent(spec.getFullName()) }, "run"),
+      this.createDom('a', {
+        className: 'description',
+        href: '?spec=' + encodeURIComponent(spec.getFullName()),
+        title: spec.getFullName()
+      }, spec.description));
+
+
+  var resultItems = results.getItems();
+  var messagesDiv = this.createDom('div', { className: 'messages' });
+  for (var i = 0; i < resultItems.length; i++) {
+    var result = resultItems[i];
+
+    if (result.type == 'log') {
+      messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage log'}, result.toString()));
+    } else if (result.type == 'expect' && result.passed && !result.passed()) {
+      messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage fail'}, result.message));
+
+      if (result.trace.stack) {
+        messagesDiv.appendChild(this.createDom('div', {className: 'stackTrace'}, result.trace.stack));
+      }
+    }
+  }
+
+  if (messagesDiv.childNodes.length > 0) {
+    specDiv.appendChild(messagesDiv);
+  }
+
+  this.suiteDivs[spec.suite.id].appendChild(specDiv);
+};
+
+jasmine.TrivialReporter.prototype.log = function() {
+  var console = jasmine.getGlobal().console;
+  if (console && console.log) {
+    if (console.log.apply) {
+      console.log.apply(console, arguments);
+    } else {
+      console.log(arguments); // ie fix: console.log.apply doesn't exist on ie
+    }
+  }
+};
+
+jasmine.TrivialReporter.prototype.getLocation = function() {
+  return this.document.location;
+};
+
+jasmine.TrivialReporter.prototype.specFilter = function(spec) {
+  var paramMap = {};
+  var params = this.getLocation().search.substring(1).split('&');
+  for (var i = 0; i < params.length; i++) {
+    var p = params[i].split('=');
+    paramMap[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
+  }
+
+  if (!paramMap.spec) {
+    return true;
+  }
+  return spec.getFullName().indexOf(paramMap.spec) === 0;
+};

data/app/assets/javascripts/jax/runtime.js

@@ -0,0 +1,6 @@
+function toggleCustomizationHelp() {
+  style = $('#how-to-customize')[0].style;
+  if (style.display == 'block')
+    style.display = 'none';
+  else style.display = 'block';
+}

data/app/assets/javascripts/jax/shader_editor.js.coffee

@@ -0,0 +1,33 @@
+#= require "./dom-helpers"
+
+{div, link} = Suite
+  
+setup_preview = ->
+  Jax.Controller.create "jax_suite",
+    index: ->
+      @object = new Jax.Model mesh: new Jax.Mesh.Sphere, position: [0,0,-3]
+      @world.addObject @object
+    mouse_dragged: (m) ->
+      @object.camera.pitch m.diffy * -0.01
+      @object.camera.yaw   m.diffx *  0.01
+    update: -> @object.mesh.material = @material
+  
+  canvas = $("#preview")[0]
+  canvas.context = new Jax.Context canvas, root:"jax_suite"
+
+controller = -> $("#preview")[0].context.current_controller
+
+material = (name) ->
+  div link(name, ->
+    controller().material = name
+    false
+  )
+  
+$(document).ready ->
+  for material_name in Jax.Material.all()
+    $("#material-list").append material(material_name)
+    
+  setup_preview()
+
+  $("#mesh").change ->
+    controller().object.mesh = eval("new #{@options[@selectedIndex].value}()");

data/app/assets/stylesheets/jax/controller-list.css

@@ -0,0 +1,5 @@
+#controller-select {
+  display: block;
+  min-width: 100%;
+  height: 470px;
+}

data/app/assets/stylesheets/jax/jasmine.css

@@ -0,0 +1,16 @@
+/*= require "jasmine.css" */
+
+/* uses monospace and pre so that shader error traces are more readable */
+.resultMessage.fail {
+  font-family: monospace;
+  white-space: pre-line;
+  padding-top: 1em;
+}
+
+.jasmine_reporter {
+  margin-top: 1em;
+}
+
+.jasmine_reporter .banner {
+  border: 1px solid #bbb;
+}

data/app/assets/stylesheets/jax/nav.css

@@ -0,0 +1,41 @@
+#nav {
+  display: block;
+  background-color: #ccc;
+  border: 1px solid #999;
+  height: 1em;
+  padding: 0;
+  padding-left: 1in;
+  padding-right: 1in;
+}
+
+#nav ul {
+  margin: 0;
+  padding: 0;
+  margin-bottom: 1em;
+}
+
+#nav li {
+  padding-top: 0.5em;
+  padding-bottom: 0.25em;
+  padding-left: 1em;
+  padding-right: 1em;
+  position: relative;
+  
+  margin-right: 0px;
+  margin-bottom: 0;
+  display: inline;
+  font-size: 11pt;
+  
+  border: 1px solid #999;
+  background-color: #ddd;
+  color: #fff;
+}
+
+#nav li:hover {
+  background-color: #eee;
+}
+
+#nav li.selected {
+  background-color: #eef;
+  color: #000;
+}