Merge "playground: add light solarized theme based on Vanadium style"
diff --git a/client/browser/render.js b/client/browser/render.js
index 6535416..6f2ad5f 100644
--- a/client/browser/render.js
+++ b/client/browser/render.js
@@ -60,26 +60,14 @@
return h('footer', [
h('nav.main', [
h('a', {
- href: 'https://v.io/introduction.html'
- }, 'Intro'),
- h('a', {
- href: 'https://v.io/installation/'
- }, 'Install'),
- h('a', {
- href: 'https://v.io/tutorials/'
- }, 'Tutorials'),
+ href: 'https://github.com/vanadium/issues/issues/'
+ }, 'File a bug'),
h('a', {
href: 'https://v.io/docs.html'
- }, 'API'),
- h('a', {
- href: 'https://v.io/community/'
- }, 'Community'),
+ }, 'API Docs'),
h('a', {
href: 'https://v.io/tos.html'
- }, 'Terms of Service'),
- h('a', {
- href: 'https://github.com/vanadium/issues/issues/'
- }, 'File a Bug')
+ }, 'Terms of service')
]),
h('nav.social', [
h('a.icon-github', { href: 'https://github.com/vanadium' }),
diff --git a/client/browser/widgets/ace-widget.js b/client/browser/widgets/ace-widget.js
index 21ff6be..5a3ed98 100644
--- a/client/browser/widgets/ace-widget.js
+++ b/client/browser/widgets/ace-widget.js
@@ -48,12 +48,10 @@
var ace = require('brace');
require('brace/mode/javascript');
require('brace/mode/golang');
- require('brace/theme/monokai');
var element = document.createElement('div');
editor.ace = ace.edit(element);
- editor.ace.setTheme('ace/theme/monokai');
editor.ace.on('change', function(data) {
var event = new window.CustomEvent('ace-change', {
detail: {
@@ -101,6 +99,10 @@
// Ensure that update is called on the first vdom cycle.
editor.update(null, element);
+ // Simple way to not deal with ace themes and use our own.
+ element.classList.remove('ace-tm');
+ element.classList.add('vanadium-solarized-light');
+
return element;
};
diff --git a/client/stylesheets/components/footer.css b/client/stylesheets/components/footer.css
index fe7b290..c533bf5 100644
--- a/client/stylesheets/components/footer.css
+++ b/client/stylesheets/components/footer.css
@@ -7,8 +7,7 @@
flex-wrap: wrap;
align-items: center;
background-color: var(--blue-grey-100);
- padding: 0 var(--gutter);
- padding-top: var(--gutter);
+ padding: var(--gutter-half);
}
footer .main {
@@ -16,14 +15,8 @@
}
footer .main a {
- display: inline-block;
- margin-right: var(--gutter);
- margin-bottom: var(--gutter);
- font-size: 14px;
- line-height: 14px;
- font-weight: var(--font-weight-medium);
+ margin-right: var(--gutter-half);
color: var(--blue-grey-500);
- text-transform: uppercase;
}
footer .social {
@@ -31,18 +24,10 @@
}
footer .social a {
- margin-left: var(--gutter);
- margin-bottom: var(--gutter);
+ margin-left: var(--gutter-half);
}
-@media (--narrow-window) {
- footer .main,
- footer .social {
- flex: 0 0 100%;
- }
-
- footer .social a {
- margin-left: 0;
- margin-right: var(--gutter);
- }
+footer .icon-github,
+footer .icon-twitter {
+ inherit: .icon-base;
}
diff --git a/client/stylesheets/index.css b/client/stylesheets/index.css
index 449c579..1fac8e3 100644
--- a/client/stylesheets/index.css
+++ b/client/stylesheets/index.css
@@ -10,6 +10,7 @@
@import "./components/header.css";
@import "./components/footer.css";
@import "./components/results.css";
+@import "./themes/light.css";
body, .playground {
display: flex;
diff --git a/client/stylesheets/themes/light.css b/client/stylesheets/themes/light.css
new file mode 100644
index 0000000..ffba6ad
--- /dev/null
+++ b/client/stylesheets/themes/light.css
@@ -0,0 +1,105 @@
+/* Copyright 2015 The Vanadium Authors. All rights reserved. */
+/* Use of this source code is governed by a BSD-style */
+/* license that can be found in the LICENSE file. */
+
+.vanadium-solarized-light {
+ background-color: var(--codebox-color);
+ color: var(--text-base00);
+}
+
+.vanadium-solarized-light .ace_gutter {
+ background-color: color(var(--codebox-color) shade(5%));
+ color: var(--text-base1);
+}
+
+.vanadium-solarized-light .ace_print-margin {
+ width: 1px;
+ background-color: color(var(--text-base1) tint(20%));
+}
+
+.vanadium-solarized-light .ace_cursor {
+ color: var(--text-base03);
+}
+
+
+.vanadium-solarized-light .ace_marker-layer .ace_selection {
+ background-color: color(var(--text-base2) shade(5%));
+ color: var(--text-base1);
+}
+
+.vanadium-solarized-light.ace_multiselect .ace_selection.ace_start {
+ box-shadow: 0 0 3px 0px magenta;
+ border-radius: 2px;
+}
+
+.vanadium-solarized-light .ace_marker-layer .ace_step {
+ background-color: magenta;
+}
+
+.vanadium-solarized-light .ace_marker-layer .ace_bracket {
+ margin: -1px 0 0 -1px;
+ border: 1px solid var(--text-base1);
+}
+
+.vanadium-solarized-light .ace_marker-layer .ace_active-line {
+ background-color: color(var(--codebox-color) shade(5%));
+}
+.vanadium-solarized-light .ace_gutter-active-line {
+ background-color : color(var(--text-base2) shade(5%));
+}
+.vanadium-solarized-light .ace_marker-layer .ace_selected-word {
+ border: 1px solid var(--text-base2);
+}
+
+.vanadium-solarized-light .ace_invisible {
+ color: color(var(--text-base1) tint(20%));
+}
+
+.vanadium-solarized-light .ace_keyword,
+.vanadium-solarized-light .ace_meta,
+.vanadium-solarized-light .ace_support.ace_class,
+.vanadium-solarized-light .ace_support.ace_type {
+ color: var(--text-green);
+}
+.vanadium-solarized-light .ace_constant.ace_character,
+.vanadium-solarized-light .ace_constant.ace_other {
+ color: var(--text-red);
+}
+.vanadium-solarized-light .ace_constant.ace_language {
+ color: var(--text-yellow);
+}
+.vanadium-solarized-light .ace_constant.ace_numeric {
+ color: var(--text-magenta);
+}
+.vanadium-solarized-light .ace_fold {
+ background-color: var(--text-blue);
+ border-color: var(--text-magenta);
+}
+.vanadium-solarized-light .ace_entity.ace_name.ace_function,
+.vanadium-solarized-light .ace_entity.ace_name.ace_tag,
+.vanadium-solarized-light .ace_support.ace_function,
+.vanadium-solarized-light .ace_variable,
+.vanadium-solarized-light .ace_variable.ace_language {
+ color: var(--text-cyan);
+}
+
+.vanadium-solarized-light .ace_identifier {
+ color: var(--text-base01);
+}
+
+.vanadium-solarized-light .ace_storage {
+ color: var(--text-green);
+}
+.vanadium-solarized-light .ace_string {
+ color: var(--text-blue);
+}
+.vanadium-solarized-light .ace_string.ace_regexp {
+ color: var(--text-red);
+}
+.vanadium-solarized-light .ace_comment,
+.vanadium-solarized-light .ace_entity.ace_other.ace_attribute-name {
+ color: var(--text-base1);
+}
+.vanadium-solarized-light .ace_indent-guide {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHjy8NJ/AAjgA5fzQUmBAAAAAElFTkSuQmCC) right repeat-y
+}
