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

added product color themes

pull/1387/head
Scott Anderson 2020-08-01 00:07:49 -06:00
parent f156570fe5
commit d663e66bc3
22 changed files with 507 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,9 +64,9 @@
text-align: center;
color: $error-page-btn-text;
transition: background-color .2s;
@include gradient($grad-blue);
@include gradient($article-btn-gradient);
&:hover {
@include gradient($grad-blue);
@include gradient($article-btn-gradient-hover);
}
&.back:before {
content: "\e90a";

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

@ -61,8 +61,8 @@
margin-left: .25rem;
color: $g20-white;
height: 2rem;
@include gradient($version-selector-gradient);
background-attachment: local;
@include gradient($default-dropdown-gradient);
background-attachment: local !important;
font-weight: $medium;
border-radius: $radius;
overflow: hidden;

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

@ -5,11 +5,11 @@ a.btn {
display: inline-block;
margin: .5rem .25rem .5rem 0;
padding: .5rem 1rem;
color: $article-btn-text;
color: $article-btn-text !important;
border-radius: $radius;
font-size: .95rem;
z-index: 1;
@include gradient($grad-blue);
@include gradient($article-btn-gradient);
&:after {
content: "";
@ -20,7 +20,7 @@ a.btn {
width: 100%;
height: 100%;
border-radius: $radius;
@include gradient($grad-blue-light);
@include gradient($article-btn-gradient-hover);
opacity: 0;
transition: opacity .2s;
z-index: -1;

14
assets/styles/layouts/article/_code.scss
View File

@ -6,7 +6,7 @@ code,pre {
color: $article-code;
}
p,li,table,h2,h3,h4,h5,h6 {
p,li,table {
code {
padding: .1rem .4rem .2rem;
border-radius: $radius;
@ -17,6 +17,18 @@ p,li,table,h2,h3,h4,h5,h6 {
}
}
// Don't allow code formatting in headings
h1,h2,h3,h4,h5,h6 {
code {
padding: inherit !important;
background: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
font-family: $rubik;
color: inherit !important;
}
}
a {
code {
font-weight: normal;

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

@ -1,7 +1,5 @@
// Styles for accordian-like expandable content blocks
$vertical-offset: -14px;
.expand {
border-top: 1px solid $article-hr;
padding: .75rem 0;

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

@ -17,7 +17,7 @@
padding: .35rem .75rem;
display: inline-block;
text-align: center;
color: $article-tab-text;
color: $article-tab-text !important;
border-radius: $radius;
background-color: $article-tab-bg;
transition: background-color .2s, color .2s;
@ -32,23 +32,23 @@
width: 100%;
height: 100%;
border-radius: $radius;
@include gradient($grad-blue);
@include gradient($article-btn-gradient);
opacity: 0;
transition: opacity .2s;
z-index: -1;
}
&:hover {
color: $article-tab-active-text;
color: $article-tab-active-text !important;
&:after {
opacity: 1;
}
}
&.is-active {
color: $article-tab-active-text;
color: $article-tab-active-text !important;
&:after {
opacity: 1;
@include gradient($grad-blue)
@include gradient($article-btn-gradient)
}
}
}

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

@ -21,6 +21,7 @@ table {
th {
color: $g20-white;
strong { color: $g20-white; }
&:first-child {
border-radius: ($radius) 0 0 0;
}

6
assets/styles/layouts/article/_telegraf-plugins.scss
View File

@ -49,7 +49,7 @@
right: 0.5rem;
opacity: 0.25;
transition: opacity .2s, background .2s, color .2s;
background-color: rgba($article-btn, 0);
@include gradient($article-btn-gradient);
.icon-github {
font-size: 1.2rem;
@ -60,7 +60,7 @@
&:hover {
.github-link {
opacity: 1;
background-color: rgba($article-btn, 1);
@include gradient($article-btn-gradient);
}
}
@ -213,7 +213,7 @@
.plugin-card {
.github-link {
opacity: 1;
background-color: $article-btn;
@include gradient($article-btn-gradient)
padding: .25rem .35rem .35rem;
line-height: 0;
.icon-github { margin: 0; }

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

@ -11,12 +11,12 @@
color: inherit;
}
a {
color: $article-warn-link;
color: $article-warn-link !important;
code:after {
border-color: transparent rgba($article-warn-code, .35) transparent transparent;
}
&:hover {
color: $article-warn-link-hover;
color: $article-warn-link-hover !important;
code:after {
border-color: transparent $article-warn-link-hover transparent transparent;
}

88
assets/styles/product-overrides/chronograf.scss Normal file
View File

@ -0,0 +1,88 @@
.chronograf {
.topnav {
.docs-home, .influx-home {
&:hover { color: $chronograf-topnav-link-hover; }
}
.dropdown { @include gradient($chronograf-dropdown-gradient) }
}
.sidebar {
&--search input {
&:focus {
border-color: $chronograf-sidebar-search-highlight;
box-shadow: 1px 1px 10px rgba($chronograf-sidebar-search-highlight, .5);
}
}
#nav-tree {
li {
&.active {
&:before { background: $chronograf-nav-active; }
& > a {
color: $chronograf-nav-active;
&:hover { color: $chronograf-nav-active; }
}
& > .children-toggle {
background: $chronograf-nav-active;
&:before, &:after { background: $body-bg; }
}
& > ul { border-left: 2px solid $chronograf-nav-active; }
}
}
.nav-category > a {
color: $chronograf-nav-category;
&:hover { color: $chronograf-nav-category-hover; }
}
.nav-item > a:hover { color: $chronograf-nav-item-hover; }
.children-toggle:hover { background: $chronograf-nav-toggle-bg-hover; }
}
}
.article--content{
h1,h2,h3,h4,h5,h6 { color: $chronograf-article-heading; }
h2,h4 {
color: $chronograf-article-heading-alt;
}
a {
color: $chronograf-article-link;
&:hover { color: $chronograf-article-link-hover; }
&.btn {
@include gradient($chronograf-btn-gradient);
&:after { @include gradient($chronograf-btn-gradient-hover); }
}
}
.children-links, .list-links {
h2,h3,h4 {
a a:after { color: rgba($chronograf-article-heading, .35); }
a:hover:after { color: $chronograf-article-link; }
}
}
.expand-label:hover .expand-toggle { background: $chronograf-article-link; }
.tabs a {
&:after { @include gradient($chronograf-btn-gradient); }
&:hover { color: $chronograf-article-tab-active-text; }
&.is-active {
color: $chronograf-article-tab-active-text;
&:after {
@include gradient($chronograf-btn-gradient)
}
}
}
table thead { @include gradient($chronograf-article-table-header, 90deg); }
.tags .tag :after { @include gradient($grad-MilkyWay) }
.truncate a.truncate-toggle:hover { color: $chronograf-article-link; }
}
.algolia-autocomplete .algolia-docsearch-suggestion--highlight { color: $chronograf-article-link; }
}

88
assets/styles/product-overrides/kapacitor.scss Normal file
View File

@ -0,0 +1,88 @@
.kapacitor {
.topnav {
.docs-home, .influx-home {
&:hover { color: $kapacitor-topnav-link-hover; }
}
.dropdown { @include gradient($kapacitor-dropdown-gradient) }
}
.sidebar {
&--search input {
&:focus {
border-color: $kapacitor-sidebar-search-highlight;
box-shadow: 1px 1px 10px rgba($kapacitor-sidebar-search-highlight, .5);
}
}
#nav-tree {
li {
&.active {
&:before { background: $kapacitor-nav-active; }
& > a {
color: $kapacitor-nav-active;
&:hover { color: $kapacitor-nav-active; }
}
& > .children-toggle {
background: $kapacitor-nav-active;
&:before, &:after { background: $body-bg; }
}
& > ul { border-left: 2px solid $kapacitor-nav-active; }
}
}
.nav-category > a {
color: $kapacitor-nav-category;
&:hover { color: $kapacitor-nav-category-hover; }
}
.nav-item > a:hover { color: $kapacitor-nav-item-hover; }
.children-toggle:hover { background: $kapacitor-nav-toggle-bg-hover; }
}
}
.article--content{
h1,h2,h3,h4,h5,h6 { color: $kapacitor-article-heading; }
h2,h4 {
color: $kapacitor-article-heading-alt;
}
a {
color: $kapacitor-article-link;
&:hover { color: $kapacitor-article-link-hover; }
&.btn {
@include gradient($kapacitor-btn-gradient);
&:after { @include gradient($kapacitor-btn-gradient-hover); }
}
}
.children-links, .list-links {
h2,h3,h4 {
a a:after { color: rgba($kapacitor-article-heading, .35); }
a:hover:after { color: $kapacitor-article-link; }
}
}
.expand-label:hover .expand-toggle { background: $kapacitor-article-link; }
.tabs a {
&:after { @include gradient($kapacitor-btn-gradient); }
&:hover { color: $kapacitor-article-tab-active-text; }
&.is-active {
color: $kapacitor-article-tab-active-text;
&:after {
@include gradient($kapacitor-btn-gradient)
}
}
}
table thead { @include gradient($kapacitor-article-table-header, 90deg); }
.tags .tag :after { @include gradient($grad-MilkyWay) }
.truncate a.truncate-toggle:hover { color: $kapacitor-article-link; }
}
.algolia-autocomplete .algolia-docsearch-suggestion--highlight { color: $kapacitor-article-link; }
}

88
assets/styles/product-overrides/telegraf.scss Normal file
View File

@ -0,0 +1,88 @@
.telegraf {
.topnav {
.docs-home, .influx-home {
&:hover { color: $telegraf-topnav-link-hover; }
}
.dropdown { @include gradient($telegraf-dropdown-gradient) }
}
.sidebar {
&--search input {
&:focus {
border-color: $telegraf-sidebar-search-highlight;
box-shadow: 1px 1px 10px rgba($telegraf-sidebar-search-highlight, .5);
}
}
#nav-tree {
li {
&.active {
&:before { background: $telegraf-nav-active; }
& > a {
color: $telegraf-nav-active;
&:hover { color: $telegraf-nav-active; }
}
& > .children-toggle {
background: $telegraf-nav-active;
&:before, &:after { background: $body-bg; }
}
& > ul { border-left: 2px solid $telegraf-nav-active; }
}
}
.nav-category > a {
color: $telegraf-nav-category;
&:hover { color: $telegraf-nav-category-hover; }
}
.nav-item > a:hover { color: $telegraf-nav-item-hover; }
.children-toggle:hover { background: $telegraf-nav-toggle-bg-hover; }
}
}
.article--content{
h1,h2,h3,h4,h5,h6 { color: $telegraf-article-heading; }
h2,h4 {
color: $telegraf-article-heading-alt;
}
a {
color: $telegraf-article-link;
&:hover { color: $telegraf-article-link-hover; }
&.btn {
@include gradient($telegraf-btn-gradient);
&:after { @include gradient($telegraf-btn-gradient-hover); }
}
}
.children-links, .list-links {
h2,h3,h4 {
a a:after { color: rgba($telegraf-article-heading, .35); }
a:hover:after { color: $telegraf-article-link; }
}
}
.expand-label:hover .expand-toggle { background: $telegraf-article-link; }
.tabs a {
&:after { @include gradient($telegraf-btn-gradient); }
&:hover { color: $telegraf-article-tab-active-text; }
&.is-active {
color: $telegraf-article-tab-active-text;
&:after {
@include gradient($telegraf-btn-gradient)
}
}
}
table thead { @include gradient($telegraf-article-table-header, 90deg); }
.tags .tag :after { @include gradient($grad-MilkyWay) }
.truncate a.truncate-toggle:hover { color: $telegraf-article-link; }
}
.algolia-autocomplete .algolia-docsearch-suggestion--highlight { color: $telegraf-article-link; }
}

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

@ -25,3 +25,8 @@
"layouts/url-selector",
"layouts/feature-callouts",
"layouts/v1-overrides";
// Import Product-specifc color schemes
@import "product-overrides/telegraf",
"product-overrides/chronograf",
"product-overrides/kapacitor";

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

@ -19,7 +19,7 @@ $body-bg: $g0-obsidian;
// TopNav Colors
$topnav-link: $g20-white;
$topnav-link-hover: $b-pool;
$version-selector-gradient: $grad-Miyazakisky;
$default-dropdown-gradient: $grad-Miyazakisky;
$theme-switch-light: inline-block;
$theme-switch-dark: none;
@ -152,9 +152,9 @@ $article-tab-active-bg: $b-pool;
$article-tab-code-text: $g20-white;
// Article page buttons
$article-btn: $b-pool;
$article-btn-gradient: $grad-blue;
$article-btn-text: $g20-white;
$article-btn-hover: $b-pool;
$article-btn-gradient-hover: $grad-blue-light;
$article-btn-text-hover: $g20-white;
// Article UI nav icons
@ -198,3 +198,7 @@ $svg-table-code-string: $gr-viridian;
$svg-geo-s2-cell: $b-dodger;
$svg-geo-region: $p-comet;
$svg-geo-point: $br-chartreuse;
@import "dark/telegraf",
"dark/chronograf",
"dark/kapacitor";

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

@ -20,7 +20,7 @@ $radius: 3px !default;
// TopNav Colors
$topnav-link: $g8-storm !default;
$topnav-link-hover: $b-dodger !default;
$version-selector-gradient: $grad-PastelGothic !default;
$default-dropdown-gradient: $grad-PastelGothic !default;
$theme-switch-light: none !default;
$theme-switch-dark: inline-block !default;
@ -152,9 +152,9 @@ $article-tab-active-bg: $b-pool !default;
$article-tab-code-text: $cp-marguerite !default;
// Article page buttons
$article-btn: $b-pool !default;
$article-btn-gradient: $grad-blue !default;
$article-btn-text: $g20-white !default;
$article-btn-hover: $b-pool !default;
$article-btn-gradient-hover: $grad-blue-light !default;
$article-btn-text-hover: $g20-white !default;
// Article UI nav icons
@ -198,3 +198,7 @@ $svg-table-code-string: #12A290 !default;
$svg-geo-s2-cell: $b-hydrogen !default;
$svg-geo-region: $br-galaxy !default;
$svg-geo-point: $p-potassium !default;
@import "light/telegraf",
"light/chronograf",
"light/kapacitor";

31
assets/styles/themes/dark/chronograf.scss Normal file
View File

@ -0,0 +1,31 @@
// Colors specific to Chronograf DARK theme
// TopNav Colors
$chronograf-topnav-link-hover: $br-galaxy;
$chronograf-dropdown-gradient: $grad-PurpleRain;
// Search
$chronograf-sidebar-search-highlight: $br-galaxy;
// Left Navigation
$chronograf-nav-category: $br-galaxy;
$chronograf-nav-category-hover: $b-pool;
$chronograf-nav-item-hover: $p-potassium;
$chronograf-nav-toggle-bg-hover: $b-dodger;
$chronograf-nav-active: $br-chartreuse;
// Article Content
$chronograf-article-heading: $g20-white;
$chronograf-article-heading-alt: $g20-white;
$chronograf-article-link: $br-galaxy;
$chronograf-article-link-hover: $g20-white;
// Article Tables
$chronograf-article-table-header: $grad-PowerStone;
// Article Buttons
$chronograf-btn-gradient: $grad-PurpleRain;
$chronograf-btn-gradient-hover: $grad-OminousFog;
// Article Tabs for tabbed content
$chronograf-article-tab-active-text: $g20-white;

31
assets/styles/themes/dark/kapacitor.scss Normal file
View File

@ -0,0 +1,31 @@
// Colors specific to Kapacitor DARK theme
// TopNav Colors
$kapacitor-topnav-link-hover: $b-laser;
$kapacitor-dropdown-gradient: $grad-GarageBand;
// Search
$kapacitor-sidebar-search-highlight: $gr-rainforest;
// Left Navigation
$kapacitor-nav-category: $gr-rainforest;
$kapacitor-nav-category-hover: $b-laser;
$kapacitor-nav-item-hover: $b-laser;
$kapacitor-nav-toggle-bg-hover: $gr-rainforest;
$kapacitor-nav-active: $p-potassium;
// Article Content
$kapacitor-article-heading: $g20-white;
$kapacitor-article-heading-alt: $g20-white;
$kapacitor-article-link: $gr-rainforest;
$kapacitor-article-link-hover: $g20-white;
// Article Tables
$kapacitor-article-table-header: $grad-GarageBand;
// Article Buttons
$kapacitor-btn-gradient: $grad-green-dark;
$kapacitor-btn-gradient-hover: $grad-green-shade;
// Article Tabs for tabbed content
$kapacitor-article-tab-active-text: $g20-white;

31
assets/styles/themes/dark/telegraf.scss Normal file
View File

@ -0,0 +1,31 @@
// Colors specific to Telegraf DARK theme
// TopNav Colors
$telegraf-topnav-link-hover: $r-dreamsicle;
$telegraf-dropdown-gradient: $grad-ScotchBonnet;
// Search
$telegraf-sidebar-search-highlight: $r-dreamsicle;
// Left Navigation
$telegraf-nav-category: $r-dreamsicle;
$telegraf-nav-category-hover: $br-chartreuse;
$telegraf-nav-item-hover: $p-potassium;
$telegraf-nav-toggle-bg-hover: $r-curacao;
$telegraf-nav-active: $br-chartreuse;
// Article Content
$telegraf-article-heading: $g20-white;
$telegraf-article-heading-alt: $g20-white;
$telegraf-article-link: $r-dreamsicle;
$telegraf-article-link-hover: $br-chartreuse;
// Article Tables
$telegraf-article-table-header: $grad-SavannaHeat;
// Article Buttons
$telegraf-btn-gradient: $grad-red;
$telegraf-btn-gradient-hover: $grad-yellow-dark;
// Article Tabs for tabbed content
$telegraf-article-tab-active-text: $g20-white;

31
assets/styles/themes/light/chronograf.scss Normal file
View File

@ -0,0 +1,31 @@
// Colors specific to Chronograf LIGHT theme
// TopNav Colors
$chronograf-topnav-link-hover: $br-pulsar !default;
$chronograf-dropdown-gradient: $grad-OminousFog !default;
// Search
$chronograf-sidebar-search-highlight: $br-pulsar !default;
// Left Navigation
$chronograf-nav-category: $br-pulsar !default;
$chronograf-nav-category-hover: $br-magenta !default;
$chronograf-nav-item-hover: $br-magenta !default;
$chronograf-nav-toggle-bg-hover: $br-magenta !default;
$chronograf-nav-active: $br-magenta !default;
// Article Content
$chronograf-article-heading: $br-pulsar !default;
$chronograf-article-heading-alt: $g5-pepper !default;
$chronograf-article-link: $br-pulsar !default;
$chronograf-article-link-hover: $b-dodger !default;
// Article Tables
$chronograf-article-table-header: $grad-MilkyWay !default;
// Article Buttons
$chronograf-btn-gradient: $grad-MilkyWay !default;
$chronograf-btn-gradient-hover: $grad-PurpleFog !default;
// Article Tabs for tabbed content
$chronograf-article-tab-active-text: $g20-white !default;

31
assets/styles/themes/light/kapacitor.scss Normal file
View File

@ -0,0 +1,31 @@
// Colors specific to Kapacitor LIGHT theme
// TopNav Colors
$kapacitor-topnav-link-hover: $b-dodger !default;
$kapacitor-dropdown-gradient: $grad-GarageBand !default;
// Search
$kapacitor-sidebar-search-highlight: $gr-viridian !default;
// Left Navigation
$kapacitor-nav-category: $gr-viridian !default;
$kapacitor-nav-category-hover: $b-dodger !default;
$kapacitor-nav-item-hover: $b-dodger !default;
$kapacitor-nav-toggle-bg-hover: $gr-viridian !default;
$kapacitor-nav-active: $p-star !default;
// Article Content
$kapacitor-article-heading: $gr-viridian !default;
$kapacitor-article-heading-alt: $g7-graphite !default;
$kapacitor-article-link: $gr-viridian !default;
$kapacitor-article-link-hover: $b-dodger !default;
// Article Tables
$kapacitor-article-table-header: $grad-GarageBand !default;
// Article Buttons
$kapacitor-btn-gradient: $grad-green-shade !default;
$kapacitor-btn-gradient-hover: $grad-green !default;
// Article Tabs for tabbed content
$kapacitor-article-tab-active-text: $g20-white !default;

31
assets/styles/themes/light/telegraf.scss Normal file
View File

@ -0,0 +1,31 @@
// Colors specific to Telegraf LIGHT theme
// TopNav Colors
$telegraf-topnav-link-hover: $r-curacao !default;
$telegraf-dropdown-gradient: $grad-ScotchBonnet !default;
// Search
$telegraf-sidebar-search-highlight: $r-curacao !default;
// Left Navigation
$telegraf-nav-category: $r-curacao !default;
$telegraf-nav-category-hover: $r-dreamsicle !default;
$telegraf-nav-item-hover: $p-amethyst !default;
$telegraf-nav-toggle-bg-hover: $p-amethyst !default;
$telegraf-nav-active: $p-amethyst !default;
// Article Content
$telegraf-article-heading: $r-curacao !default;
$telegraf-article-heading-alt: $g5-pepper !default;
$telegraf-article-link: $r-curacao !default;
$telegraf-article-link-hover: $p-amethyst !default;
// Article Tables
$telegraf-article-table-header: $grad-Miyazakisky !default;
// Article Buttons
$telegraf-btn-gradient: $grad-red !default;
$telegraf-btn-gradient-hover: $grad-yellow-dark !default;
// Article Tabs for tabbed content
$telegraf-article-tab-active-text: $g20-white !default;

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

@ -118,6 +118,7 @@ $grad-purple-dark: $p-void, $p-amethyst;
$grad-green-light: $gr-honeydew, $gr-krypton;
$grad-green: $gr-rainforest, $gr-honeydew;
$grad-green-shade: $gr-viridian, $gr-rainforest;
$grad-green-dark: $gr-emerald, $gr-viridian;
$grad-yellow-light: $y-thunder, $y-sulfur;
@ -135,3 +136,9 @@ $grad-PastelGothic: $p-comet, $b-laser;
$grad-GarageBand: $b-pool, $gr-rainforest;
$grad-LowDifficulty: $b-pool, $gr-honeydew;
$grad-DesertFestival: $r-curacao, $p-star;
$grad-SavannaHeat: $y-topaz, $r-ruby;
$grad-ScotchBonnet: $y-pineapple,$r-curacao;
// New gradients
$grad-PurpleFog: $p-potassium, $cp-munchkin;
$grad-PurpleRain: $p-void, $cp-marguerite;