Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

WIP dark theme

pull/954/head
Scott Anderson 2020-04-14 14:54:03 -06:00
parent bf43c889fe
commit b755f17b6a
18 changed files with 239 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
CONTRIBUTING.md
View File

@ -521,29 +521,6 @@ The following case insensitive values are supported:
- settings - settings
- feedback - feedback
### InfluxDB UI notification messages
In some cases, documentation references a notification message that appears in
the top-right corner of the InfluxDB UI.
Rather than taking a screenshot of the message (that can be hard to maintain over time),
use the `{{< ui-message >}}` shortcode.
It expects two parameters:
**`text`** (Required)
The message displayed.
**`color`** (Optional)
Sets the background color and icons used in the message.
The following options are available:
- green _(default)_
- blue
- red
```
{{< ui-message color="green" text="The message displayed in the notification.">}}
```
### Flexbox-formatted content blocks ### Flexbox-formatted content blocks
CSS Flexbox formatting lets you create columns in article content that adjust and CSS Flexbox formatting lets you create columns in article content that adjust and
flow based on the viewable width. flow based on the viewable width.

6
assets/styles/layouts/_error-page.scss
View File

@ -61,12 +61,12 @@
margin-right: 4px; margin-right: 4px;
padding: .75rem 1rem; padding: .75rem 1rem;
border-radius: $radius; border-radius: $radius;
background: $error-page-btn;
text-align: center; text-align: center;
color: $error-page-btn-text; color: $error-page-btn-text;
transition: background-color .2s;
@include gradient($grad-blue);
&:hover { &:hover {
background: $error-page-btn-hover; @include gradient($grad-blue);
color: $error-page-btn-hover-text;
} }
&.back:before { &.back:before {
content: "\e90a"; content: "\e90a";

4
assets/styles/layouts/_top-nav.scss
View File

@ -42,7 +42,7 @@
right: 3.5rem; right: 3.5rem;
color: $g20-white; color: $g20-white;
height: 2rem; height: 2rem;
background: $version-selector-top; @include gradient($version-selector-gradient);
font-weight: $medium; font-weight: $medium;
border-radius: $radius; border-radius: $radius;
overflow: hidden; overflow: hidden;
@ -65,7 +65,7 @@
&.open { &.open {
height: auto; height: auto;
background: linear-gradient($version-selector-top, $version-selector-bottom); @include gradient($version-selector-gradient);
&:after { &:after {
transform: rotate(180deg); transform: rotate(180deg);
} }

47
assets/styles/layouts/_ui-messages.scss
View File

@ -1,47 +0,0 @@
.article--content {
.ui-message {
display: flex;
align-items: center;
width: 375px;
margin: 1rem 0 2rem;
padding: .85rem 0;
font-family: $rubik;
font-size: .9rem;
border-radius: 5px;
color: $g20-white;
.icon, .close {
width: 13%;
text-align: center;
font-family: 'icomoon';
font-size: 1.1rem;
}
.close:after {
content: "\e932";
opacity: .25;
}
.text {
width: 74%;
font-weight: $medium;
}
&.green {
background: linear-gradient(45deg, #34bb56, #00a3fe);
.icon:before { content: ""; }
}
&.blue {
background: linear-gradient(45deg, rgb(190, 46, 228), rgb(0, 163, 255));
.icon:before { content: "\e935"; }
}
&.red {
background: linear-gradient(45deg, rgb(220, 78, 88), rgb(142, 31, 195));
.icon:before { content: "\e920"; }
}
}
}

29
assets/styles/layouts/article/_buttons.scss
View File

@ -1,22 +1,43 @@
/////////////////////////////////// Buttons ////////////////////////////////// /////////////////////////////////// Buttons //////////////////////////////////
a.btn { a.btn {
position: relative;
display: inline-block; display: inline-block;
margin: .5rem 0 1rem; margin: .5rem .25rem .5rem 0;
padding: .5rem 1rem; padding: .5rem 1rem;
background: $article-btn;
color: $article-btn-text; color: $article-btn-text;
border-radius: $radius; border-radius: $radius;
font-size: .95rem; font-size: .95rem;
z-index: 1;
@include gradient($grad-blue);
&:after {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: $radius;
@include gradient($grad-blue-light);
opacity: 0;
transition: opacity .2s;
z-index: -1;
}
&:hover { &:hover {
background: $article-btn-hover; cursor: pointer;
color: $article-btn-text-hover;
&:after {
opacity: 1;
}
} }
&.download:before { &.download:before {
content: "\e91c"; content: "\e91c";
font-family: "icomoon"; font-family: "icomoon";
margin-right: .5rem; margin-right: .5rem;
font-size: 1.1rem;
} }
} }

8
assets/styles/layouts/article/_cloud.scss
View File

@ -69,7 +69,7 @@
color: $article-cloud-text; color: $article-cloud-text;
box-shadow: 1px 3px 10px $article-cloud-shadow; box-shadow: 1px 3px 10px $article-cloud-shadow;
thead{ thead{
background: $article-cloud-table-header; @include gradient($article-cloud-table-header);
} }
tr:nth-child(even) td { tr:nth-child(even) td {
background: $article-cloud-table-row-alt; background: $article-cloud-table-row-alt;
@ -81,7 +81,11 @@
} }
.code-tabs-wrapper .code-tabs a { .code-tabs-wrapper .code-tabs a {
background: transparent; background: transparent;
&.is-active {background: $article-cloud-code-bg} color: rgba($article-cloud-text, .5);
&:hover { color: rgba($article-cloud-text, 1); }
&.is-active {
color: rgba($article-cloud-text, 1);
background: $article-cloud-code-bg};
} }
&.flex { &.flex {

8
assets/styles/layouts/article/_note.scss
View File

@ -36,7 +36,7 @@
color: $article-note-text; color: $article-note-text;
box-shadow: 1px 3px 10px $article-note-shadow; box-shadow: 1px 3px 10px $article-note-shadow;
thead{ thead{
background: $article-note-table-header; @include gradient($article-note-table-header);
} }
tr:nth-child(even) td { tr:nth-child(even) td {
background: $article-note-table-row-alt; background: $article-note-table-row-alt;
@ -48,6 +48,10 @@
} }
.code-tabs-wrapper .code-tabs a { .code-tabs-wrapper .code-tabs a {
background: transparent; background: transparent;
&.is-active {background: $article-note-code-bg} color: rgba($article-note-text, .5);
&:hover { color: rgba($article-note-text, 1); }
&.is-active {
color: rgba($article-note-text, 1);
background: $article-note-code-bg};
} }
} }

69
assets/styles/layouts/article/_tabbed-content.scss
View File

@ -1,14 +1,9 @@
/////////////////////////////// Tabbed Content /////////////////////////////// /////////////////////////////// Tabbed Content ///////////////////////////////
.tabs-wrapper { .tabs-wrapper { margin: 2.5rem 0 .5rem; }
margin: 2.5rem 0 .5rem; .code-tabs-wrapper { margin: 1.5rem 0 .5rem; }
}
.code-tabs-wrapper { .tabs {
margin: 1.5rem 0 .5rem;
}
.tabs, .code-tabs {
p { p {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -16,43 +11,49 @@
a { a {
flex-grow: 1; flex-grow: 1;
margin: 2px; margin: 2px;
position: relative;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: $medium; font-weight: $medium;
color: $article-tab-text;
padding: .35rem .75rem; padding: .35rem .75rem;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
color: $article-tab-text;
border-radius: $radius; border-radius: $radius;
background-color: $article-tab-bg; background-color: $article-tab-bg;
transition: background-color .2s, color .2s; transition: background-color .2s, color .2s;
z-index: 1;
&:after {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: $radius;
@include gradient($grad-blue);
opacity: 0;
transition: opacity .2s;
z-index: -1;
}
&:hover { &:hover {
color: $article-tab-active-text; color: $article-tab-active-text;
background: $article-tab-active-bg; &:after {
opacity: 1;
}
} }
&.is-active { &.is-active {
color: $article-tab-active-text; color: $article-tab-active-text;
background: $article-tab-active-bg; &:after {
opacity: 1;
@include gradient($grad-blue)
}
} }
} }
} }
.tab-content, .code-tabs-content {
margin: .75rem 0 3rem;
width: 100%;
& > * {
width: 100% !important;
margin-left: 0 !important;
}
}
.tab-content:not(:first-of-type),
.code-tab-content:not(:first-of-type) {
display: none;
}
.code-tabs-wrapper {
.code-tabs { .code-tabs {
p { p {
margin: 0; margin: 0;
@ -64,6 +65,7 @@
margin: 0; margin: 0;
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
display: inline-block; display: inline-block;
font-size: 0.875rem;
background: $article-bg; background: $article-bg;
color: rgba($article-tab-code-text, .5); color: rgba($article-tab-code-text, .5);
&:hover { &:hover {
@ -75,6 +77,7 @@
} }
} }
} }
.code-tab-content { .code-tab-content {
padding: 0; padding: 0;
pre { pre {
@ -82,4 +85,16 @@
border-radius: $radius 0 $radius $radius; border-radius: $radius 0 $radius $radius;
} }
} }
.tab-content, .code-tabs-content {
margin: .75rem 0 3rem;
width: 100%;
& > * {
width: 100%;
margin-left: 0;
} }
}
.tab-content:not(:first-of-type) { display: none; }
.code-tab-content:not(:first-of-type) { display: none; }

2
assets/styles/layouts/article/_tables.scss
View File

@ -15,7 +15,7 @@ table {
padding: .85rem 1.25rem; padding: .85rem 1.25rem;
} }
thead { thead {
background: linear-gradient(to right, $article-table-header-left, $article-table-header-right); @include gradient($article-table-header, 90deg);
background-attachment: fixed; background-attachment: fixed;
} }

8
assets/styles/layouts/article/_warn.scss
View File

@ -36,7 +36,7 @@
color: $article-warn-text; color: $article-warn-text;
box-shadow: 1px 3px 10px $article-warn-shadow; box-shadow: 1px 3px 10px $article-warn-shadow;
thead{ thead{
background: $article-warn-table-header; @include gradient($article-warn-table-header);
} }
tr:nth-child(even) td { tr:nth-child(even) td {
background: $article-warn-table-row-alt; background: $article-warn-table-row-alt;
@ -48,6 +48,10 @@
} }
.code-tabs-wrapper .code-tabs a { .code-tabs-wrapper .code-tabs a {
background: transparent; background: transparent;
&.is-active {background: $article-warn-code-bg} color: rgba($article-warn-text, .5);
&:hover { color: rgba($article-warn-text, 1); }
&.is-active {
color: rgba($article-warn-text, 1);
background: $article-warn-code-bg};
} }
} }

1
assets/styles/styles-default.scss
View File

@ -18,7 +18,6 @@
"layouts/content-wrapper", "layouts/content-wrapper",
"layouts/article", "layouts/article",
"layouts/inline-icons", "layouts/inline-icons",
"layouts/ui-messages",
"layouts/syntax-highlighting", "layouts/syntax-highlighting",
"layouts/algolia-search-overrides", "layouts/algolia-search-overrides",
"layouts/landing", "layouts/landing",

32
assets/styles/themes/_theme-dark.scss
View File

@ -19,8 +19,7 @@ $body-bg: $g0-obsidian;
// TopNav Colors // TopNav Colors
$topnav-link: $g20-white; $topnav-link: $g20-white;
$topnav-link-hover: $b-pool; $topnav-link-hover: $b-pool;
$version-selector-top: $b-pool; $version-selector-gradient: $grad-miyazakisky;
$version-selector-bottom: $br-galaxy;
$theme-switch-light: inline-block; $theme-switch-light: inline-block;
$theme-switch-dark: none; $theme-switch-dark: none;
@ -33,7 +32,7 @@ $sidebar-search-text: $g20-white;
// Left Navigation // Left Navigation
$nav-category: $b-pool; $nav-category: $b-pool;
$nav-category-hover: $g20-white; $nav-category-hover: $g20-white;
$nav-item: $g16-pearl; $nav-item: $g15-platinum;
$nav-item-hover: $b-pool; $nav-item-hover: $b-pool;
$nav-border: $g5-pepper; $nav-border: $g5-pepper;
$nav-toggle: $g16-pearl; $nav-toggle: $g16-pearl;
@ -45,7 +44,7 @@ $nav-active: $br-chartreuse;
$article-bg: $g1-raven; $article-bg: $g1-raven;
$article-heading: $g20-white; $article-heading: $g20-white;
$article-heading-alt: $g19-ghost; $article-heading-alt: $g19-ghost;
$article-text: $g16-pearl; $article-text: $g15-platinum;
$article-bold: $g19-ghost; $article-bold: $g19-ghost;
$article-link: $b-pool; $article-link: $b-pool;
$article-link-hover: $g20-white; $article-link-hover: $g20-white;
@ -54,7 +53,7 @@ $article-shadow: $g0-obsidian;
// Article Code // Article Code
$article-code: $cp-munchkin; $article-code: $cp-munchkin;
$article-code-bg: $code-dark-bg; $article-code-bg: $g0-obsidian;
$article-code-shadow: $g0-obsidian; $article-code-shadow: $g0-obsidian;
$article-code-accent1: $np-smokey; $article-code-accent1: $np-smokey;
$article-code-accent2: $b-pool; $article-code-accent2: $b-pool;
@ -64,13 +63,12 @@ $article-code-accent5: #ff6db0;
$article-code-accent6: $b-pool; $article-code-accent6: $b-pool;
$article-code-accent7: #e90; $article-code-accent7: #e90;
$article-code-select: $b-pool; $article-code-select: $b-pool;
$article-code-link: $b-dodger; $article-code-link: $b-pool;
$article-code-link-hover: $g20-white; $article-code-link-hover: $g20-white;
$article-code-scrollbar: $g3-castle; $article-code-scrollbar: $g3-castle;
// Article Tables // Article Tables
$article-table-header-left: $br-pulsar; $article-table-header: $grad-gundampilot;
$article-table-header-right: $b-pool;
$article-table-row-alt: $g3-castle; $article-table-row-alt: $g3-castle;
$article-table-scrollbar: $g0-obsidian; $article-table-scrollbar: $g0-obsidian;
@ -80,7 +78,7 @@ $article-note-heading: $g20-white;
$article-note-text: $gr-honeydew; $article-note-text: $gr-honeydew;
$article-note-link: $gr-wasabi; $article-note-link: $gr-wasabi;
$article-note-link-hover: $g20-white; $article-note-link-hover: $g20-white;
$article-note-table-header: $gr-viridian; $article-note-table-header: $grad-green-dark;
$article-note-table-row-alt: #1a3c34; $article-note-table-row-alt: #1a3c34;
$article-note-table-scrollbar: #162627; $article-note-table-scrollbar: #162627;
$article-note-shadow: $g0-obsidian; $article-note-shadow: $g0-obsidian;
@ -100,9 +98,9 @@ $article-warn-heading: $g20-white;
$article-warn-text: $r-tungsten; $article-warn-text: $r-tungsten;
$article-warn-link: $r-marmelade; $article-warn-link: $r-marmelade;
$article-warn-link-hover: $g20-white; $article-warn-link-hover: $g20-white;
$article-warn-table-header: rgba($r-dreamsicle, .9); $article-warn-table-header: $grad-red;
$article-warn-table-row-alt: #4a2a2a; $article-warn-table-row-alt: #4a2a2a;
$article-warn-table-scrollbar: #2a2025; $article-warn-table-scrollbar: #1f181b;
$article-warn-shadow: $g0-obsidian; $article-warn-shadow: $g0-obsidian;
$article-warn-code: #ec6e6e; $article-warn-code: #ec6e6e;
$article-warn-code-bg: $g0-obsidian; $article-warn-code-bg: $g0-obsidian;
@ -120,7 +118,7 @@ $article-cloud-heading: $g20-white;
$article-cloud-text: $b-fleur; $article-cloud-text: $b-fleur;
$article-cloud-link: $b-hawkeye; $article-cloud-link: $b-hawkeye;
$article-cloud-link-hover: $g20-white; $article-cloud-link-hover: $g20-white;
$article-cloud-table-header: $b-pool; $article-cloud-table-header: $grad-blue-dark;
$article-cloud-table-row-alt: #1b3a58; $article-cloud-table-row-alt: #1b3a58;
$article-cloud-table-scrollbar: #192a3a; $article-cloud-table-scrollbar: #192a3a;
$article-cloud-shadow: $g0-obsidian; $article-cloud-shadow: $g0-obsidian;
@ -159,20 +157,20 @@ $article-nav-icon-bg: $g5-pepper;
$article-nav-acct-bg: $g3-castle; $article-nav-acct-bg: $g3-castle;
// Error Page Colors // Error Page Colors
$error-page-btn: $b-dodger; $error-page-btn: $b-pool;
$error-page-btn-text: $g20-white; $error-page-btn-text: $g20-white;
$error-page-btn-hover: $g20-white; $error-page-btn-hover: $g20-white;
$error-page-btn-hover-text: $b-dodger; $error-page-btn-hover-text: $b-pool;
// Landing Page colors // Landing Page colors
$landing-lg-gradient-left: $wp-violentdark; $landing-lg-gradient-left: $wp-violentdark;
$landing-lg-gradient-right: $cp-minsk; $landing-lg-gradient-right: $cp-minsk;
$landing-sm-bg: $cp-victoria; $landing-sm-bg: $cp-victoria;
$landing-sm-bg-alt: $cp-victoria; $landing-sm-bg-alt: $cp-victoria;
$landing-sm-bg-hover: $b-dodger; $landing-sm-bg-hover: $b-pool;
$landing-btn-text: $g20-white; $landing-btn-text: $g20-white;
$landing-btn-bg: $b-dodger; $landing-btn-bg: $b-pool;
$landing-btn-text-hover: $b-dodger; $landing-btn-text-hover: $b-pool;
$landing-btn-bg-hover: $g20-white; $landing-btn-bg-hover: $g20-white;
$landing-artwork-color: $cp-minsk; $landing-artwork-color: $cp-minsk;

60
assets/styles/themes/_theme-light.scss
View File

@ -19,37 +19,36 @@ $radius: 3px !default;
// TopNav Colors // TopNav Colors
$topnav-link: $g8-storm !default; $topnav-link: $g8-storm !default;
$topnav-link-hover: $b-dodger !default; $topnav-link-hover: $b-pool !default;
$version-selector-top: $b-pool !default; $version-selector-gradient: $grad-pastelgothic !default;
$version-selector-bottom: $br-galaxy !default;
$theme-switch-light: none !default; $theme-switch-light: none !default;
$theme-switch-dark: inline-block !default; $theme-switch-dark: inline-block !default;
// Search // Search
$sidebar-search-bg: $g20-white !default; $sidebar-search-bg: $g20-white !default;
$sidebar-search-shadow: $g14-chromium !default; $sidebar-search-shadow: $g14-chromium !default;
$sidebar-search-highlight: $b-dodger !default; $sidebar-search-highlight: $b-pool !default;
$sidebar-search-text: $g8-storm !default; $sidebar-search-text: $g8-storm !default;
// Left Navigation // Left Navigation
$nav-category: $b-dodger !default; $nav-category: $b-pool !default;
$nav-category-hover: $cp-purple !default; $nav-category-hover: $br-magenta !default;
$nav-item: $np-rum !default; $nav-item: $g9-mountain !default;
$nav-item-hover: $cp-purple !default; $nav-item-hover: $br-magenta !default;
$nav-border: $g14-chromium !default; $nav-border: $g14-chromium !default;
$nav-toggle: $g20-white !default; $nav-toggle: $g20-white !default;
$nav-toggle-hover: $g20-white !default; $nav-toggle-hover: $g20-white !default;
$nav-toggle-bg-hover: $br-galaxy !default; $nav-toggle-bg-hover: $br-magenta !default;
$nav-active: $m-magenta !default; $nav-active: $br-magenta !default;
// Article Content // Article Content
$article-bg: $g20-white !default; $article-bg: $g20-white !default;
$article-heading: $cp-marguerite !default; $article-heading: $br-pulsar !default;
$article-heading-alt: $g7-graphite !default; $article-heading-alt: $g5-pepper !default;
$article-text: $g8-storm !default; $article-text: $g6-smoke !default;
$article-bold: $g8-storm !default; $article-bold: $g5-pepper !default;
$article-link: $b-dodger !default; $article-link: $b-pool !default;
$article-link-hover: $cp-purple !default; $article-link-hover: $br-magenta !default;
$article-shadow: #c8cdd0 !default; $article-shadow: #c8cdd0 !default;
$article-hr: $g15-platinum !default; $article-hr: $g15-platinum !default;
@ -58,11 +57,11 @@ $article-code: $cp-marguerite !default;
$article-code-bg: $cp-titan !default; $article-code-bg: $cp-titan !default;
$article-code-shadow: $g20-white !default; $article-code-shadow: $g20-white !default;
$article-code-accent1: $cp-melrose !default; $article-code-accent1: $cp-melrose !default;
$article-code-accent2: $b-dodger !default; $article-code-accent2: $b-pool !default;
$article-code-accent3: #12A290 !default; $article-code-accent3: #12A290 !default;
$article-code-accent4: $o-ruby !default; $article-code-accent4: $r-ruby !default;
$article-code-accent5: #e24bbb !default; $article-code-accent5: #e24bbb !default;
$article-code-accent6: $b-dodger !default; $article-code-accent6: $b-pool !default;
$article-code-accent7: #e90 !default; $article-code-accent7: #e90 !default;
$article-code-select: $b-pool !default; $article-code-select: $b-pool !default;
$article-code-link: $cp-marguerite !default; $article-code-link: $cp-marguerite !default;
@ -70,8 +69,7 @@ $article-code-link-hover: $cp-marguerite !default;
$article-code-scrollbar: $cp-periwinkle !default; $article-code-scrollbar: $cp-periwinkle !default;
// Article Tables // Article Tables
$article-table-header-left: $cp-marguerite !default; $article-table-header: $grad-miyazakisky !default;
$article-table-header-right: $b-laser !default;
$article-table-row-alt: #F6F7F8 !default; $article-table-row-alt: #F6F7F8 !default;
$article-table-scrollbar: $g14-chromium !default; $article-table-scrollbar: $g14-chromium !default;
@ -81,7 +79,7 @@ $article-note-heading: $gr-emerald !default;
$article-note-text: $gr-emerald !default; $article-note-text: $gr-emerald !default;
$article-note-link: $gr-emerald !default; $article-note-link: $gr-emerald !default;
$article-note-link-hover: $cp-purple !default; $article-note-link-hover: $cp-purple !default;
$article-note-table-header: $gr-viridian !default; $article-note-table-header: $grad-green-dark !default;
$article-note-table-row-alt: #d6f5e9 !default; $article-note-table-row-alt: #d6f5e9 !default;
$article-note-table-scrollbar: #87DABE !default; $article-note-table-scrollbar: #87DABE !default;
$article-note-shadow: #8CB7AB !default; $article-note-shadow: #8CB7AB !default;
@ -101,7 +99,7 @@ $article-warn-heading: $o-fire !default;
$article-warn-text: $o-curacao !default; $article-warn-text: $o-curacao !default;
$article-warn-link: $o-curacao !default; $article-warn-link: $o-curacao !default;
$article-warn-link-hover: $cp-purple !default; $article-warn-link-hover: $cp-purple !default;
$article-warn-table-header: $r-dreamsicle !default; $article-warn-table-header: $grad-red !default;
$article-warn-table-row-alt: #ffe6df !default; $article-warn-table-row-alt: #ffe6df !default;
$article-warn-table-scrollbar: #FFB1B1 !default; $article-warn-table-scrollbar: #FFB1B1 !default;
$article-warn-shadow: #b98a7d !default; $article-warn-shadow: #b98a7d !default;
@ -121,7 +119,7 @@ $article-cloud-heading: $b-eastern !default;
$article-cloud-text: $b-curious !default; $article-cloud-text: $b-curious !default;
$article-cloud-link: $b-curious !default; $article-cloud-link: $b-curious !default;
$article-cloud-link-hover: $cp-purple !default; $article-cloud-link-hover: $cp-purple !default;
$article-cloud-table-header: $b-curious !default; $article-cloud-table-header: $grad-blue !default;
$article-cloud-table-row-alt: $b-hawkeye !default; $article-cloud-table-row-alt: $b-hawkeye !default;
$article-cloud-table-scrollbar: $b-malibu !default; $article-cloud-table-scrollbar: $b-malibu !default;
$article-cloud-shadow: #6EB8E4 !default; $article-cloud-shadow: #6EB8E4 !default;
@ -139,7 +137,7 @@ $article-cloud-code-scrollbar: $b-malibu !default;
$article-enterprise-base: $br-galaxy !default; $article-enterprise-base: $br-galaxy !default;
$article-enterprise-text: $cp-purple !default; $article-enterprise-text: $cp-purple !default;
$article-enterprise-link: $cp-purple !default; $article-enterprise-link: $cp-purple !default;
$article-enterprise-link-hover: $b-dodger !default; $article-enterprise-link-hover: $b-pool !default;
// Article Tabs for tabbed content // Article Tabs for tabbed content
$article-tab-text: $g8-storm !default; $article-tab-text: $g8-storm !default;
@ -152,7 +150,7 @@ $article-tab-code-text: $cp-marguerite !default;
// Article page buttons // Article page buttons
$article-btn: $b-pool !default; $article-btn: $b-pool !default;
$article-btn-text: $g20-white !default; $article-btn-text: $g20-white !default;
$article-btn-hover: $b-dodger !default; $article-btn-hover: $b-pool !default;
$article-btn-text-hover: $g20-white !default; $article-btn-text-hover: $g20-white !default;
// Article UI nav icons // Article UI nav icons
@ -160,7 +158,7 @@ $article-nav-icon-bg: $g6-smoke !default;
$article-nav-acct-bg: $g5-pepper !default; $article-nav-acct-bg: $g5-pepper !default;
// Error Page Colors // Error Page Colors
$error-page-btn: $b-dodger !default; $error-page-btn: $b-pool !default;
$error-page-btn-text: $g20-white !default; $error-page-btn-text: $g20-white !default;
$error-page-btn-hover: $b-pool !default; $error-page-btn-hover: $b-pool !default;
$error-page-btn-hover-text: $g20-white !default; $error-page-btn-hover-text: $g20-white !default;
@ -170,10 +168,10 @@ $landing-lg-gradient-left: $cp-jakarta !default;
$landing-lg-gradient-right: $wp-heart !default; $landing-lg-gradient-right: $wp-heart !default;
$landing-sm-bg: $wp-seance !default; $landing-sm-bg: $wp-seance !default;
$landing-sm-bg-alt: $wp-jagger !default; $landing-sm-bg-alt: $wp-jagger !default;
$landing-sm-bg-hover: $b-dodger !default; $landing-sm-bg-hover: $b-pool !default;
$landing-btn-text: $g20-white !default; $landing-btn-text: $g20-white !default;
$landing-btn-bg: $b-dodger !default; $landing-btn-bg: $b-pool !default;
$landing-btn-text-hover: $b-dodger !default; $landing-btn-text-hover: $b-pool !default;
$landing-btn-bg-hover: $g20-white !default; $landing-btn-bg-hover: $g20-white !default;
$landing-artwork-color: rgba($g20-white, .15) !default; $landing-artwork-color: rgba($g20-white, .15) !default;
@ -190,7 +188,7 @@ $svg-table-row-alt1: $b-laser !default;
$svg-table-row-alt2: $br-galaxy !default; $svg-table-row-alt2: $br-galaxy !default;
$svg-table-code: $cp-marguerite !default; $svg-table-code: $cp-marguerite !default;
$svg-table-code-bg: $cp-titan !default; $svg-table-code-bg: $cp-titan !default;
$svg-table-code-operator: $b-dodger !default; $svg-table-code-operator: $b-pool !default;
$svg-table-code-string: #12A290 !default; $svg-table-code-string: #12A290 !default;
$svg-geo-s2-cell: $b-malibu !default; $svg-geo-s2-cell: $b-malibu !default;

38
assets/styles/tools/_color-palette.scss
View File

@ -82,8 +82,40 @@ $r-flan: #FFF7F4;
// Code // Code
$cp-munchkin: #B7B8FF; $cp-munchkin: #B7B8FF;
$code-dark-bg: $g0-obsidian; $cp-marguerite: #736ECD;
$code-dark-scroll:#2f2f50; $cp-titan: #EDEDFF;
/////////////////////////////////// Gradients //////////////////////////////////
$grad-grey-light: $g13-mist, $g18-cloud;
$grad-grey: $g10-wolf, $g13-mist;
$grad-grey-dark: $g3-castle, $g6-smoke;
$grad-blue-light: $b-pool, $b-hydrogen;
$grad-blue: $b-ocean, $b-pool;
$grad-blue-dark: $b-sapphire, $b-ocean;
$grad-purple-light: $p-comet, $p-moonstone;
$grad-purple: $p-star, $p-comet;
$grad-purple-dark: $p-void, $p-amethyst;
$grad-green-light: $gr-honeydew, $gr-krypton;
$grad-green: $gr-rainforest, $gr-honeydew;
$grad-green-dark: $gr-emerald, $gr-viridian;
$grad-yellow-light: $y-thunder, $y-sulfur;
$grad-yellow: $y-pineapple, $y-thunder;
$grad-yellow-dark: $y-topaz, $y-tiger;
$grad-red-light: $r-dreamsicle, $r-tungsten;
$grad-red: $r-curacao, $r-dreamsicle;
$grad-red-dark: $r-ruby, $r-fire;
$grad-gundampilot: $p-amethyst, $b-ocean;
$grad-miyazakisky: $p-star, $b-pool;
$grad-pastelgothic: $p-comet, $b-laser;
$grad-garageband: $b-pool, $gr-rainforest;
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
@ -114,14 +146,12 @@ $cp-jakarta: #322368;
$cp-minsk: #423681; $cp-minsk: #423681;
$cp-victoria: #52499A; $cp-victoria: #52499A;
$cp-blueviolet: #625CB3; $cp-blueviolet: #625CB3;
$cp-marguerite: #736ECD;
$cp-purple: #8381E6; $cp-purple: #8381E6;
// //
$cp-melrose: #A5A6FF; $cp-melrose: #A5A6FF;
// //
$cp-periwinkle: #C9CAFF; $cp-periwinkle: #C9CAFF;
$cp-coolfog: #DBDBFF; $cp-coolfog: #DBDBFF;
$cp-titan: #EDEDFF;
// Neutral Purples // Neutral Purples
$np-deepnight: #13002d; // Brand color $np-deepnight: #13002d; // Brand color

4
assets/styles/tools/mixins.scss
View File

@ -14,3 +14,7 @@
border-radius: 6px; border-radius: 6px;
} }
} }
@mixin gradient($colors, $deg: 45deg) {
background: linear-gradient($deg, $colors);
}

56
content/v2.0/example.md
View File

@ -441,20 +441,36 @@ This is **bold**. This is _italic_.
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
Etiam tristique nisi et tristique auctor. Etiam tristique nisi et tristique auctor.
{{< code-tabs-wrapper >}}
{{% code-tabs %}}
[tab1](#)
[tab2](#)
{{% /code-tabs %}}
{{% code-tab-content %}}
```js ```js
// This is a code block inside of a blockquote // This is a code block inside of a blockquote
cpu = from(bucket:"example-bucket") cpu = from(bucket:"example-bucket")
|> range(start:-30m) |> range(start:-30m)
|> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName") |> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName")
``` ```
{{% /code-tab-content %}}
{{% code-tab-content %}}
```js
// This is a code block inside of a blockquote
cpu = from(bucket:"my-bucket")
|> range(start:-30m)
|> filter(fn:(r) => r._measurement == "cpu")
```
{{% /code-tab-content %}}
{{< /code-tabs-wrapper >}}
###### This is a table in a blockquote ###### This is a table in a blockquote
| Column 1 | Column 2 | Column 3 | Column 4 | | Column 1 | Column 2 | Column 3 | Column 4 | Column 1 | Column 2 | Column 3 | Column 4 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
| Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 | | Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 | Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 |
| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 | | Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 | Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 |
| Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 | | Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 | Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 |
| Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 | | Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 | Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 |
{{% /warn %}} {{% /warn %}}
@ -549,20 +565,36 @@ This is **bold**. This is _italic_.
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
Etiam tristique nisi et tristique auctor. Etiam tristique nisi et tristique auctor.
{{< code-tabs-wrapper >}}
{{% code-tabs %}}
[tab1](#)
[tab2](#)
{{% /code-tabs %}}
{{% code-tab-content %}}
```js ```js
// This is a code block inside of a blockquote // This is a code block inside of a blockquote
cpu = from(bucket:"example-bucket") cpu = from(bucket:"example-bucket")
|> range(start:-30m) |> range(start:-30m)
|> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName") |> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName")
``` ```
{{% /code-tab-content %}}
{{% code-tab-content %}}
```js
// This is a code block inside of a blockquote
cpu = from(bucket:"my-bucket")
|> range(start:-30m)
|> filter(fn:(r) => r._measurement == "cpu")
```
{{% /code-tab-content %}}
{{< /code-tabs-wrapper >}}
###### This is a table in a blockquote ###### This is a table in a blockquote
| Column 1 | Column 2 | Column 3 | Column 4 | | Column 1 | Column 2 | Column 3 | Column 4 | Column 1 | Column 2 | Column 3 | Column 4 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
| Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 | | Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 | Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 |
| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 | | Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 | Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 |
| Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 | | Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 | Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 |
| Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 | | Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 | Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 |
{{% /cloud-msg %}} {{% /cloud-msg %}}

4
content/v2.0/write-data/quick-start.md
View File

@ -31,10 +31,6 @@ metrics in the [Prometheus data format](https://prometheus.io/docs/instrumenting
The scraper stores the scraped metrics in the bucket created during the The scraper stores the scraped metrics in the bucket created during the
[initial setup process](/v2.0/get-started/#set-up-influxdb). [initial setup process](/v2.0/get-started/#set-up-influxdb).
The following message briefly appears in the UI:
{{< ui-message text="Scraper was created successfully" >}}
{{% note %}} {{% note %}}
Quick Start is only available in the last step of the setup process. Quick Start is only available in the last step of the setup process.
If you missed the Quick Start option, you can [manually create a scraper](/v2.0/write-data/scrape-data) If you missed the Quick Start option, you can [manually create a scraper](/v2.0/write-data/scrape-data)

8
layouts/shortcodes/ui-message.html
View File

@ -1,8 +0,0 @@
{{ $text := .Get "text" }}
{{ $color := .Get "color" | default "green" }}
<div class="ui-message {{ $color }}">
<div class="icon"></div>
<div class="text">{{ $text }}</div>
<div class="close"></div>
</div>