apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Integrated dark theme for explore UI

Browse Source
pull/11942/head
David Kaltschmidt 7 years ago
parent f5e351af8b
commit 448b1cbc15
3 changed files with 63 additions and 197 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 12
      public/sass/_variables.dark.scss
  2. 12
      public/sass/_variables.light.scss
  3. 236
      public/sass/pages/_explore.scss

12
public/sass/_variables.dark.scss
Unescape View File

@ -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;

12
public/sass/_variables.light.scss
Unescape View File

@ -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;

236
public/sass/pages/_explore.scss
Unescape View File

@ -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;
}
}

Write Preview
Loading…
Cancel
Save