1 files changed, 101 insertions, 0 deletions
diff --git a/app/assets/sass/_highlight.scss b/app/assets/sass/_highlight.scss
new file mode 100644
index 0000000..1ade2d7
--- /dev/null
+++ b/app/assets/sass/_highlight.scss
@@ -0,0 +1,101 @@
+.plan-query-container {
+   border: 1px solid $line-color;
+   padding: $padding-xl;
+   background-color: #fff;
+   position: absolute;
+   box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
+   border-radius: $border-radius-base;
+   margin-bottom: $padding-xl;
+   z-index: 4;
+   left: 0;
+
+   .plan-query-text {
+      background-color: #fff;
+      font-family: $font-family-mono;
+      text-align: left;
+
+      .code-key-item {
+         background-color: $yellow;
+         font-weight: 600;
+         padding: 1px;
+      }
+   }
+
+   h3 {
+      font-size: $font-size-lg;
+      width: 93%;
+      text-align: left;
+      border-bottom: 1px solid $line-color;
+      padding-bottom: $padding-base;
+      margin-bottom: $padding-lg;
+   }
+}
+
+.hljs, .hljs-subst {
+  color: $text-color;
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+   color: $dark-blue;
+   font-weight: bold;
+}
+
+.hljs-built_in,
+.hljs-literal,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+   color: $dark-blue;
+   font-weight: bold;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+   color: $dark-blue;
+   font-weight: bold;
+}
+
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: $green;
+  font-weight: 600;
+}
+
+.hljs-title,
+.hljs-section {
+  color: $dark-blue;
+  font-weight: bold;
+}
+
+.hljs-comment {
+  color: $text-color-light;
+  font-style: italic;
+}
+
+.hljs-meta {
+  color: $text-color-light;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: 600;
+}