Add basic files

.gitignore

@@ -0,0 +1 @@
+node_modules

dist/main.css

@@ -0,0 +1,77 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  font-size: 20px;
+  overflow: hidden; }
+
+body.playbook {
+  background-color: #F7F7F7; }
+
+section#zazu {
+  background-color: rgba(234, 234, 234, 0.9);
+  background-position: 530px 5px;
+  background-repeat: no-repeat;
+  background-size: 60px;
+  -webkit-app-region: drag;
+  cursor: move; }
+  section#zazu input {
+    outline: none;
+    font-size: 40px;
+    width: 500px;
+    padding: 10px;
+    border: 0;
+    background-color: transparent;
+    -webkit-app-region: no-drag;
+    cursor: auto; }
+  section#zazu iframe#preview {
+    border: 0; }
+  section#zazu div.results {
+    display: flex;
+    flex-direction: row; }
+    section#zazu div.results ul {
+      padding: 0;
+      margin: 0;
+      border-top: 1px solid rgba(222, 222, 222, 0.9);
+      max-height: 333px;
+      overflow: hidden;
+      width: 50%; }
+      section#zazu div.results ul:last-child {
+        width: 100%; }
+      section#zazu div.results ul + div {
+        width: 50%; }
+      section#zazu div.results ul li {
+        display: block;
+        height: 45px;
+        line-height: 45px;
+        border-bottom: 1px solid rgba(222, 222, 222, 0.9);
+        -webkit-app-region: no-drag;
+        cursor: pointer;
+        width: 100%; }
+        section#zazu div.results ul li .icon {
+          text-align: center;
+          line-height: 30px;
+          height: 30px;
+          width: 30px;
+          margin: 7.5px;
+          float: left; }
+        section#zazu div.results ul li h2, section#zazu div.results ul li h3 {
+          margin: 0;
+          padding-left: 10px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-weight: 400;
+          font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
+        section#zazu div.results ul li h2 {
+          font-size: 20px;
+          line-height: 25px; }
+          section#zazu div.results ul li h2:last-child {
+            font-size: 20px;
+            line-height: 45px; }
+        section#zazu div.results ul li h3 {
+          font-size: 15px;
+          line-height: 15px; }
+        section#zazu div.results ul li.active {
+          background-color: rgba(189, 160, 203, 0.9); }
+        section#zazu div.results ul li:hover {
+          background-color: rgba(212, 193, 221, 0.9); }

gulpfile.js

@@ -0,0 +1,9 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var path = require('path');
+
+gulp.task('build', function () {
+  return gulp.src('./sass/**/*.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(gulp.dest('./dist'));
+});

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "clean-theme",
+  "version": "1.0.0",
+  "description": "A clean theme for Zazu.",
+  "main": "gulpfile.js",
+  "scripts": {
+    "build": "gulp build"
+  },
+  "author": "Nahuel Scotti",
+  "license": "MIT",
+  "dependencies": {
+    "gulp": "^3.9.1",
+    "gulp-sass": "^2.3.1"
+  }
+}

readme.md

@@ -0,0 +1,22 @@
+## Clean Theme
+
+A clean theme written in SASS with node/gulp.
+
+![Screenshot](./images/screenshot.png)
+
+## Installing
+
+Mark `singuerinc/zazu-clean-theme` inside of your `~/.zazurc.json` file.
+
+~~~ json
+{
+  "theme": "singuerinc/zazu-clean-theme"
+}
+~~~
+
+## Building
+
+~~~
+npm install
+npm run build
+~~~

sass/main.scss

@@ -0,0 +1,111 @@
+$main: #F7F7F7;
+$secondary: #BDA0CB;
+$transparency: 0.1;
+
+html, body {
+  margin: 0;
+  padding: 0;
+  font-size: 20px;
+  overflow: hidden;
+}
+
+body.playbook {
+  background-color: $main;
+}
+
+section#zazu {
+  background-color: transparentize(darken($main, 5%), $transparency);
+  background-position: 530px 5px;
+  background-repeat: no-repeat;
+  background-size: 60px;
+  -webkit-app-region: drag;
+  cursor: move;
+
+  input {
+    outline: none;
+    font-size: 40px;
+    width: 500px;
+    padding: 10px;
+    border: 0;
+    background-color: transparent;
+    -webkit-app-region: no-drag;
+    cursor: auto;
+  }
+
+  iframe#preview {
+    border: 0;
+  }
+
+  div.results {
+    display: flex;
+    flex-direction: row;
+
+    ul {
+      padding: 0;
+      margin: 0;
+      border-top: 1px solid transparentize(darken($main, 10%), $transparency);
+      max-height: 333px;
+      overflow: hidden;
+      width: 50%;
+
+      &:last-child {
+        width: 100%;
+      }
+
+      + div {
+        width: 50%;
+      }
+
+      li {
+        display: block;
+        height: 45px;
+        line-height: 45px;
+        border-bottom: 1px solid transparentize(darken($main, 10%), $transparency);
+        -webkit-app-region: no-drag;
+        cursor: pointer;
+        width: 100%;
+
+        .icon {
+          text-align: center;
+          line-height: 30px;
+          height: 30px;
+          width: 30px;
+          margin: 7.5px;
+          float: left;
+        }
+
+        h2, h3 {
+          margin: 0;
+          padding-left: 10px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-weight: 400;
+          font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+        }
+
+        h2 {
+          font-size: 20px;
+          line-height: 25px;
+          &:last-child {
+            font-size: 20px;
+            line-height: 45px;
+          }
+        }
+
+        h3 {
+          font-size: 15px;
+          line-height: 15px;
+        }
+
+        &.active {
+          background-color: transparentize($secondary, $transparency);
+        }
+
+        &:hover {
+          background-color: transparentize(lighten($secondary, 10%), $transparency);
+        }
+      }
+    }
+  }
+}

zazu.json

@@ -0,0 +1,7 @@
+{
+  "name": "Clean Theme",
+  "version": "1.0.0",
+  "author": "singuerinc",
+  "description": "A basic clean theme for Zazu",
+  "stylesheet": "dist/main.css"
+}