Skip to content

N
nexpie-grafana-theme
Commit 448b1cbc by David Kaltschmidt
Options

Integrated dark theme for explore UI

parent f5e351af
Showing with 63 additions and 197 deletions
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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment