Integrated dark theme for explore UI

public/sass/_variables.dark.scss

@@ -45,6 +45,10 @@ $brand-warning: $brand-primary;
 $brand-danger: $red;
 
 $query-blue: $blue;
+$query-red: $red;
+$query-green: $green;
+$query-purple: $purple;
+$query-orange: $orange;
 
 // Status colors
 // -------------------------
@@ -176,6 +180,9 @@ $btn-inverse-bg-hl: lighten($dark-3, 4%);
 $btn-inverse-text-color: $link-color;
 $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
 
+$btn-active-bg: $gray-4;
+$btn-active-text-color: $blue-dark;
+
 $btn-link-color: $gray-3;
 
 $iconContainerBackground: $black;
@@ -204,6 +211,11 @@ $input-invalid-border-color: lighten($red, 5%);
 $search-shadow: 0 0 30px 0 $black;
 $search-filter-box-bg: $gray-blue;
 
+// Typeahead
+$typeahead-shadow: 0 5px 10px 0 $black;
+$typeahead-selected-bg: $dark-4;
+$typeahead-selected-color: $blue;
+
 // Dropdowns
 // -------------------------
 $dropdownBackground: $dark-3;

public/sass/_variables.light.scss

@@ -46,6 +46,10 @@ $brand-warning: $orange;
 $brand-danger: $red;
 
 $query-blue: $blue-dark;
+$query-red: $red;
+$query-green: $green;
+$query-purple: $purple;
+$query-orange: $orange;
 
 // Status colors
 // -------------------------
@@ -173,6 +177,9 @@ $btn-inverse-bg-hl: darken($gray-6, 5%);
 $btn-inverse-text-color: $gray-1;
 $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
 
+$btn-active-bg: $white;
+$btn-active-text-color: $blue-dark;
+
 $btn-link-color: $gray-1;
 
 $btn-divider-left: $gray-4;
@@ -226,6 +233,11 @@ $tab-border-color: $gray-5;
 $search-shadow: 0 5px 30px 0 $gray-4;
 $search-filter-box-bg: $gray-7;
 
+// Typeahead
+$typeahead-shadow: 0 5px 10px 0 $gray-5;
+$typeahead-selected-bg: lighten($blue, 25%);
+$typeahead-selected-color: $blue-dark;
+
 // Dropdowns
 // -------------------------
 $dropdownBackground: $white;

public/sass/pages/_explore.scss

@@ -13,19 +13,18 @@
     }
   }
 
+  // Push split button a bit
   .explore-first-button {
     margin-left: 15px;
   }
 
-  .explore-graph {
-    width: 100%;
-    height: 100%;
-  }
-
+  // Graph panel needs a bit extra padding at top
   .panel-container {
-    padding: 10px 10px 5px 10px;
+    padding: $panel-padding;
+    padding-top: 10px;
   }
 
+  // Make sure wrap buttons around on small screens
   .navbar {
     flex-wrap: wrap;
     height: auto;
@@ -34,19 +33,18 @@
   .navbar-page-btn {
     margin-right: 1rem;
 
+    // Explore icon in header
     .fa {
-      position: relative;
-      top: -1px;
-      font-size: 19px;
-      line-height: 8px;
+      font-size: 100%;
       opacity: 0.75;
-      margin-right: 8px;
+      margin-right: 0.5em;
     }
   }
 
+  // Toggle mode
   .navbar-button.active {
-    color: #0083b3;
-    background-color: white;
+    color: $btn-active-text-color;
+    background-color: $btn-active-bg;
   }
 
   .elapsed-time {
@@ -81,7 +79,7 @@
 }
 
 .explore + .explore {
-  border-left: 1px dotted #aaa;
+  border-left: 1px dotted $table-border;
 }
 
 .query-row {
@@ -97,8 +95,8 @@
 }
 
 .query-field {
-  font-size: 14px;
-  font-family: Consolas, Menlo, Courier, monospace;
+  font-size: $font-size-root;
+  font-family: $font-family-monospace;
   height: auto;
 }
 
@@ -108,12 +106,12 @@
   padding: 6px 7px 4px;
   width: 100%;
   cursor: text;
-  line-height: 1.5;
-  color: rgba(0, 0, 0, 0.65);
+  line-height: $line-height-base;
+  color: $text-color-weak;
   background-color: $panel-bg;
   background-image: none;
   border: $panel-border;
-  border-radius: 3px;
+  border-radius: $border-radius;
   transition: all 0.3s;
 }
 
@@ -124,38 +122,36 @@
     top: -10000px;
     left: -10000px;
     opacity: 0;
-    border-radius: 4px;
+    border-radius: $border-radius;
     transition: opacity 0.75s;
-    border: 1px solid #e4e4e4;
+    border: $panel-border;
     max-height: calc(66vh);
     overflow-y: scroll;
     max-width: calc(66%);
     overflow-x: hidden;
     outline: none;
     list-style: none;
-    background: #fff;
-    color: rgba(0, 0, 0, 0.65);
+    background: $panel-bg;
+    color: $text-color;
     transition: opacity 0.4s ease-out;
+    box-shadow: $typeahead-shadow;
   }
 
   .typeahead-group__title {
-    color: rgba(0, 0, 0, 0.43);
-    font-size: 12px;
-    line-height: 1.5;
-    padding: 8px 16px;
+    color: $text-color-weak;
+    font-size: $font-size-sm;
+    line-height: $line-height-base;
+    padding: $input-padding-y $input-padding-x;
   }
 
   .typeahead-item {
-    line-height: 200%;
     height: auto;
-    font-family: Consolas, Menlo, Courier, monospace;
-    padding: 0 16px 0 28px;
-    font-size: 12px;
+    font-family: $font-family-monospace;
+    padding: $input-padding-y $input-padding-x;
+    padding-left: $input-padding-x-lg;
+    font-size: $font-size-sm;
     text-overflow: ellipsis;
     overflow: hidden;
-    margin-left: -1px;
-    left: 1px;
-    position: relative;
     z-index: 1;
     display: block;
     white-space: nowrap;
@@ -165,129 +161,24 @@
   }
 
   .typeahead-item__selected {
-    background-color: #ecf6fd;
-    color: #108ee9;
+    background-color: $typeahead-selected-bg;
+    color: $typeahead-selected-color;
   }
 }
 
 /* SYNTAX */
 
-/**
- * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
- * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
- * @author Tim  Shedor
- */
-
 .explore {
-  code[class*='language-'],
-  pre[class*='language-'] {
-    color: black;
-    background: none;
-    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: 1.5;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-  }
-
-  /* Code blocks */
-  pre[class*='language-'] {
-    position: relative;
-    margin: 0.5em 0;
-    overflow: visible;
-    padding: 0;
-  }
-  pre[class*='language-'] > code {
-    position: relative;
-    border-left: 10px solid #358ccb;
-    box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
-    background-color: #fdfdfd;
-    background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
-    background-size: 3em 3em;
-    background-origin: content-box;
-    background-attachment: local;
-  }
-
-  code[class*='language'] {
-    max-height: inherit;
-    height: inherit;
-    padding: 0 1em;
-    display: block;
-    overflow: auto;
-  }
-
-  /* Margin bottom to accomodate shadow */
-  :not(pre) > code[class*='language-'],
-  pre[class*='language-'] {
-    background-color: #fdfdfd;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    margin-bottom: 1em;
-  }
-
-  /* Inline code */
-  :not(pre) > code[class*='language-'] {
-    position: relative;
-    padding: 0.2em;
-    border-radius: 0.3em;
-    color: #c92c2c;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    display: inline;
-    white-space: normal;
-  }
-
-  pre[class*='language-']:before,
-  pre[class*='language-']:after {
-    content: '';
-    z-index: -2;
-    display: block;
-    position: absolute;
-    bottom: 0.75em;
-    left: 0.18em;
-    width: 40%;
-    height: 20%;
-    max-height: 13em;
-    box-shadow: 0px 13px 8px #979797;
-    -webkit-transform: rotate(-2deg);
-    -moz-transform: rotate(-2deg);
-    -ms-transform: rotate(-2deg);
-    -o-transform: rotate(-2deg);
-    transform: rotate(-2deg);
-  }
-
-  :not(pre) > code[class*='language-']:after,
-  pre[class*='language-']:after {
-    right: 0.75em;
-    left: auto;
-    -webkit-transform: rotate(2deg);
-    -moz-transform: rotate(2deg);
-    -ms-transform: rotate(2deg);
-    -o-transform: rotate(2deg);
-    transform: rotate(2deg);
-  }
-
   .token.comment,
   .token.block-comment,
   .token.prolog,
   .token.doctype,
   .token.cdata {
-    color: #7d8b99;
+    color: $text-color-weak;
   }
 
   .token.punctuation {
-    color: #5f6364;
+    color: $text-color-weak;
   }
 
   .token.property,
@@ -298,7 +189,7 @@
   .token.constant,
   .token.symbol,
   .token.deleted {
-    color: #c92c2c;
+    color: $query-red;
   }
 
   .token.selector,
@@ -308,33 +199,26 @@
   .token.function,
   .token.builtin,
   .token.inserted {
-    color: #2f9c0a;
+    color: $query-green;
   }
 
   .token.operator,
   .token.entity,
   .token.url,
   .token.variable {
-    color: #a67f59;
-    background: rgba(255, 255, 255, 0.5);
+    color: $query-purple;
   }
 
   .token.atrule,
   .token.attr-value,
   .token.keyword,
   .token.class-name {
-    color: #1990b8;
+    color: $query-blue;
   }
 
   .token.regex,
   .token.important {
-    color: #e90;
-  }
-
-  .language-css .token.string,
-  .style .token.string {
-    color: #a67f59;
-    background: rgba(255, 255, 255, 0.5);
+    color: $query-orange;
   }
 
   .token.important {
@@ -355,46 +239,4 @@
   .namespace {
     opacity: 0.7;
   }
-
-  @media screen and (max-width: 767px) {
-    pre[class*='language-']:before,
-    pre[class*='language-']:after {
-      bottom: 14px;
-      box-shadow: none;
-    }
-  }
-
-  /* Plugin styles */
-  .token.tab:not(:empty):before,
-  .token.cr:before,
-  .token.lf:before {
-    color: #e0d7d1;
-  }
-
-  /* Plugin styles: Line Numbers */
-  pre[class*='language-'].line-numbers {
-    padding-left: 0;
-  }
-
-  pre[class*='language-'].line-numbers code {
-    padding-left: 3.8em;
-  }
-
-  pre[class*='language-'].line-numbers .line-numbers-rows {
-    left: 0;
-  }
-
-  /* Plugin styles: Line Highlight */
-  pre[class*='language-'][data-line] {
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-  }
-  pre[data-line] code {
-    position: relative;
-    padding-left: 4em;
-  }
-  pre .line-highlight {
-    margin-top: 0;
-  }
 }