mirror of https://github.com/crossplane/docs.git
add color variables, update code blocks, update dark theme items
Signed-off-by: Shane Miller <shanecm.ux@gmail.com>
This commit is contained in:
Shane Miller
parent
872d68e35c
commit
5e530319e8
|
|
@ -6,8 +6,7 @@
|
|||
|
||||
// Style for highlighted lines when hovering over copy button
|
||||
.copyHover {
|
||||
background-color: #e9ecef;
|
||||
color: black;
|
||||
background-color: #{$fog-800};
|
||||
}
|
||||
|
||||
// Code box div
|
||||
|
|
@ -28,6 +27,11 @@
|
|||
color:#ddd;
|
||||
}
|
||||
|
||||
// Color edit icon
|
||||
.text-white {
|
||||
fill: #{$fog-300};
|
||||
}
|
||||
|
||||
:target{
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
|
|
@ -42,10 +46,10 @@
|
|||
|
||||
.btn-clipboard{
|
||||
border: 0;
|
||||
color: $gray-500;
|
||||
color: #{$fog-300};
|
||||
background-color: inherit;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
color: #{$fog-0};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
@mixin code-theme-dark {
|
||||
|
||||
--code-block-background-color: #19212C;
|
||||
--code-line-numbers-background-color: #{darken(#19212C, 2)};
|
||||
--code-block-background-color: #{$fog-900};
|
||||
--code-line-number-color: #{$fog-300};
|
||||
//--code-line-numbers-background-color: #{darken(#19212C, 2)};
|
||||
|
||||
/* Theme: Colors customized for Crossplane. Was originally Dracula */
|
||||
|
||||
/* Theme: Dracula */
|
||||
/* Background */
|
||||
.bg {
|
||||
color: #f8f8f2;
|
||||
|
|
@ -12,15 +14,14 @@
|
|||
/* PreWrapper */
|
||||
.chroma {
|
||||
color: #f8f8f2;
|
||||
background-color: #19212C;
|
||||
//background-color: #1b1c16;
|
||||
}
|
||||
/* Other */
|
||||
.chroma .x {
|
||||
}
|
||||
/* Error */
|
||||
.chroma .err {
|
||||
color: #960050;
|
||||
background-color: #1e0010;
|
||||
border-color: #{$salmon-300};
|
||||
}
|
||||
/* CodeLine */
|
||||
.chroma .cl {
|
||||
|
|
@ -41,7 +42,7 @@
|
|||
}
|
||||
/* LineHighlight */
|
||||
.chroma .hl {
|
||||
background-color: #ffffcc;
|
||||
background-color: #{$fog-800};
|
||||
}
|
||||
/* LineNumbersTable */
|
||||
.chroma .lnt {
|
||||
|
|
@ -49,7 +50,7 @@
|
|||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #b2b2b2;
|
||||
color: #{$fog-300};
|
||||
}
|
||||
/* LineNumbers */
|
||||
.chroma .ln {
|
||||
|
|
@ -57,285 +58,53 @@
|
|||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #7f7f7f;
|
||||
color: #{$fog-300};
|
||||
}
|
||||
/* LineNumber Right Border */
|
||||
.highlight .chroma code .ln {
|
||||
border-right: 1px solid #{$fog-700};
|
||||
}
|
||||
/* Line */
|
||||
.chroma .line {
|
||||
display: flex;
|
||||
}
|
||||
/* Keyword */
|
||||
.chroma .k {
|
||||
color: #66d9ef;
|
||||
/* Keyword, KeywordDeclaration, KeywordCosntant, KeywordPseudo, KeywordReserved, KeywordType, NameConstant, GenericOutput */
|
||||
.chroma .k, .chroma .kd, .chroma .kc, .chroma .kp, .chroma .kr, .chroma .kt, .chroma .no, .chroma .go {
|
||||
color: #{$tangerine-300};
|
||||
}
|
||||
/* KeywordConstant */
|
||||
.chroma .kc {
|
||||
color: #66d9ef;
|
||||
/* KeywordNamespace, NameTag, Operator, OperatorWord, GenericDeleted */
|
||||
.chroma .kn, .chroma .nt, .chroma .o, .chroma .ow, .chroma .gd {
|
||||
color: #{$aqua-300};
|
||||
}
|
||||
/* KeywordDeclaration */
|
||||
.chroma .kd {
|
||||
color: #66d9ef;
|
||||
/* Name, NameBuiltin, NameBuiltinPseudo, NameEntity, NameFunctionMagic, NameLabel, NameNamespace, NameProperty, NameVariable, NameVariableClass, NameVariableGlobal, NameVariableInstance, NameVariableMagic, Punctuation, Generic, GenericHeading, GenericError, GenericPrompt, GenericTraceback, GenericUnderline, TextWhitespace */
|
||||
.chroma .n, .chroma .nb, .chroma .bp, .chroma .ni, .chroma .fm, .chroma .nl, .chroma .nn, .chroma .py, .chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm, .chroma .p, .chroma .g, .chroma .gh, .chroma .gr, .chroma .gp, .chroma .gt, .chroma .gl, .chroma .w {
|
||||
}
|
||||
/* KeywordNamespace */
|
||||
.chroma .kn {
|
||||
color: #f92672;
|
||||
/* NameAttribute, NameClass, NameDecorator, NameException, NameFunction, NameOther, GenericInserted */
|
||||
.chroma .na, .chroma .nc, .chroma .nd, .chroma .ne, .chroma .nf, .chroma .nx, .chroma .gh {
|
||||
color: #{$grass-300};
|
||||
}
|
||||
/* KeywordPseudo */
|
||||
.chroma .kp {
|
||||
color: #66d9ef;
|
||||
/* Literal, LiteralStringEscape, LiteralNumber, LiteralNumberBin, LiteralNumberFloat, LiteralNumberHex, LiteralNumberInteger, LiteralNumberIntegerLong, LiteralNumberOct */
|
||||
.chroma .l, .chroma .se, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
|
||||
color: #{$salmon-300};
|
||||
}
|
||||
/* KeywordReserved */
|
||||
.chroma .kr {
|
||||
color: #66d9ef;
|
||||
/* LiteralDate, LiteralString, LiteralStringAffix, LiteralStringBacktick, LiteralStringChar, LiteralStringDelimiter, LiteralStringDoc, LiteralStringDouble, LiteralStringHeredoc, LiteralStringInterpol, LiteralStringOther, LiteralStringRegex, LiteralStringSingle, LiteralStringSymbol */
|
||||
.chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss {
|
||||
color: #{$sun-300};
|
||||
}
|
||||
/* KeywordType */
|
||||
.chroma .kt {
|
||||
color: #66d9ef;
|
||||
}
|
||||
/* Name */
|
||||
.chroma .n {
|
||||
}
|
||||
/* NameAttribute */
|
||||
.chroma .na {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* NameBuiltin */
|
||||
.chroma .nb {
|
||||
}
|
||||
/* NameBuiltinPseudo */
|
||||
.chroma .bp {
|
||||
}
|
||||
/* NameClass */
|
||||
.chroma .nc {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* NameConstant */
|
||||
.chroma .no {
|
||||
color: #66d9ef;
|
||||
}
|
||||
/* NameDecorator */
|
||||
.chroma .nd {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* NameEntity */
|
||||
.chroma .ni {
|
||||
}
|
||||
/* NameException */
|
||||
.chroma .ne {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* NameFunction */
|
||||
.chroma .nf {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* NameFunctionMagic */
|
||||
.chroma .fm {
|
||||
}
|
||||
/* NameLabel */
|
||||
.chroma .nl {
|
||||
}
|
||||
/* NameNamespace */
|
||||
.chroma .nn {
|
||||
}
|
||||
/* NameOther */
|
||||
.chroma .nx {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* NameProperty */
|
||||
.chroma .py {
|
||||
}
|
||||
/* NameTag */
|
||||
.chroma .nt {
|
||||
color: #f92672;
|
||||
}
|
||||
/* NameVariable */
|
||||
.chroma .nv {
|
||||
}
|
||||
/* NameVariableClass */
|
||||
.chroma .vc {
|
||||
}
|
||||
/* NameVariableGlobal */
|
||||
.chroma .vg {
|
||||
}
|
||||
/* NameVariableInstance */
|
||||
.chroma .vi {
|
||||
}
|
||||
/* NameVariableMagic */
|
||||
.chroma .vm {
|
||||
}
|
||||
/* Literal */
|
||||
.chroma .l {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralDate */
|
||||
.chroma .ld {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralString */
|
||||
.chroma .s {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringAffix */
|
||||
.chroma .sa {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringBacktick */
|
||||
.chroma .sb {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringChar */
|
||||
.chroma .sc {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringDelimiter */
|
||||
.chroma .dl {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringDoc */
|
||||
.chroma .sd {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringDouble */
|
||||
.chroma .s2 {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringEscape */
|
||||
.chroma .se {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralStringHeredoc */
|
||||
.chroma .sh {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringInterpol */
|
||||
.chroma .si {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringOther */
|
||||
.chroma .sx {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringRegex */
|
||||
.chroma .sr {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringSingle */
|
||||
.chroma .s1 {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringSymbol */
|
||||
.chroma .ss {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralNumber */
|
||||
.chroma .m {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralNumberBin */
|
||||
.chroma .mb {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralNumberFloat */
|
||||
.chroma .mf {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralNumberHex */
|
||||
.chroma .mh {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralNumberInteger */
|
||||
.chroma .mi {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralNumberIntegerLong */
|
||||
.chroma .il {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralNumberOct */
|
||||
.chroma .mo {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* Operator */
|
||||
.chroma .o {
|
||||
color: #f92672;
|
||||
}
|
||||
/* OperatorWord */
|
||||
.chroma .ow {
|
||||
color: #f92672;
|
||||
}
|
||||
/* Punctuation */
|
||||
.chroma .p {
|
||||
}
|
||||
/* Comment */
|
||||
.chroma .c {
|
||||
color: #75715e;
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.chroma .ch {
|
||||
color: #75715e;
|
||||
}
|
||||
/* CommentMultiline */
|
||||
.chroma .cm {
|
||||
color: #75715e;
|
||||
}
|
||||
/* CommentSingle */
|
||||
.chroma .c1 {
|
||||
color: #75715e;
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.chroma .cs {
|
||||
color: #75715e;
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.chroma .cp {
|
||||
color: #75715e;
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.chroma .cpf {
|
||||
color: #75715e;
|
||||
}
|
||||
/* Generic */
|
||||
.chroma .g {
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.chroma .gd {
|
||||
color: #f92672;
|
||||
/* Comment, CommentHashbang, CommentMultiline, CommentSingle, CommentSpecial, CommentPreproc, CommentPreprocFile, GenericSubheading */
|
||||
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf, .chroma .gu {
|
||||
color: #{$fog-300};
|
||||
}
|
||||
/* GenericEmph */
|
||||
.chroma .ge {
|
||||
font-style: italic;
|
||||
}
|
||||
/* GenericError */
|
||||
.chroma .gr {
|
||||
}
|
||||
/* GenericHeading */
|
||||
.chroma .gh {
|
||||
}
|
||||
/* GenericInserted */
|
||||
.chroma .gi {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* GenericOutput */
|
||||
.chroma .go {
|
||||
color: #6cb6d4;
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.chroma .gp {
|
||||
}
|
||||
/* GenericStrong */
|
||||
.chroma .gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.chroma .gu {
|
||||
color: #75715e;
|
||||
// Add custom border radius
|
||||
.highlight {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.chroma .gt {
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.chroma .gl {
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.chroma .w {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +1,9 @@
|
|||
@mixin code-theme-light {
|
||||
|
||||
--code-block-background-color: #19212C;
|
||||
--code-line-numbers-background-color: #{lighten(#19212C, 3)};
|
||||
--code-block-background-color: #{$fog-900};
|
||||
--code-line-number-color: #{$fog-300};
|
||||
|
||||
// --code-background: #{$code-background-dark};
|
||||
// --code-accent-color: #{darken($code-background-dark, 4)};
|
||||
// --code-accent-color-lite: #{darken($code-background-dark, 2)};
|
||||
// --code-font-color: #{$slate};
|
||||
|
||||
// --code-copy-background: #{$body-background-dark};
|
||||
// --code-copy-font-color: #{lighten($body-font-color, 24)};
|
||||
// --code-copy-border-color: #{lighten($body-font-color, 24)};
|
||||
// --code-copy-success-color: rgba(0, 200, 83, .5);
|
||||
|
||||
|
||||
/* Theme: Dracula */
|
||||
/* Theme: Colors customized for Crossplane. Was originally Dracula */
|
||||
|
||||
/* Background */
|
||||
.bg {
|
||||
|
|
@ -31,8 +20,7 @@
|
|||
}
|
||||
/* Error */
|
||||
.chroma .err {
|
||||
color: #960050;
|
||||
background-color: #1e0010;
|
||||
border-color: #{$salmon-300};
|
||||
}
|
||||
/* CodeLine */
|
||||
.chroma .cl {
|
||||
|
|
@ -53,7 +41,7 @@
|
|||
}
|
||||
/* LineHighlight */
|
||||
.chroma .hl {
|
||||
background-color: #ffffcc;
|
||||
background-color: #{$fog-800};
|
||||
}
|
||||
/* LineNumbersTable */
|
||||
.chroma .lnt {
|
||||
|
|
@ -61,7 +49,7 @@
|
|||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #b2b2b2;
|
||||
color: #{$fog-300};
|
||||
}
|
||||
/* LineNumbers */
|
||||
.chroma .ln {
|
||||
|
|
@ -69,285 +57,53 @@
|
|||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #7f7f7f;
|
||||
color: #{$fog-300};
|
||||
}
|
||||
/* LineNumber Right Border */
|
||||
.highlight .chroma code .ln {
|
||||
border-right: 1px solid #{$fog-700};
|
||||
}
|
||||
/* Line */
|
||||
.chroma .line {
|
||||
display: flex;
|
||||
}
|
||||
/* Keyword */
|
||||
.chroma .k {
|
||||
color: #66d9ef;
|
||||
/* Keyword, KeywordDeclaration, KeywordCosntant, KeywordPseudo, KeywordReserved, KeywordType, NameConstant, GenericOutput */
|
||||
.chroma .k, .chroma .kd, .chroma .kc, .chroma .kp, .chroma .kr, .chroma .kt, .chroma .no, .chroma .go {
|
||||
color: #{$tangerine-300};
|
||||
}
|
||||
/* KeywordConstant */
|
||||
.chroma .kc {
|
||||
color: #66d9ef;
|
||||
/* KeywordNamespace, NameTag, Operator, OperatorWord, GenericDeleted */
|
||||
.chroma .kn, .chroma .nt, .chroma .o, .chroma .ow, .chroma .gd {
|
||||
color: #{$aqua-300};
|
||||
}
|
||||
/* KeywordDeclaration */
|
||||
.chroma .kd {
|
||||
color: #66d9ef;
|
||||
/* Name, NameBuiltin, NameBuiltinPseudo, NameEntity, NameFunctionMagic, NameLabel, NameNamespace, NameProperty, NameVariable, NameVariableClass, NameVariableGlobal, NameVariableInstance, NameVariableMagic, Punctuation, Generic, GenericHeading, GenericError, GenericPrompt, GenericTraceback, GenericUnderline, TextWhitespace */
|
||||
.chroma .n, .chroma .nb, .chroma .bp, .chroma .ni, .chroma .fm, .chroma .nl, .chroma .nn, .chroma .py, .chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm, .chroma .p, .chroma .g, .chroma .gh, .chroma .gr, .chroma .gp, .chroma .gt, .chroma .gl, .chroma .w {
|
||||
}
|
||||
/* KeywordNamespace */
|
||||
.chroma .kn {
|
||||
color: #f92672;
|
||||
/* NameAttribute, NameClass, NameDecorator, NameException, NameFunction, NameOther, GenericInserted */
|
||||
.chroma .na, .chroma .nc, .chroma .nd, .chroma .ne, .chroma .nf, .chroma .nx, .chroma .gh {
|
||||
color: #{$grass-300};
|
||||
}
|
||||
/* KeywordPseudo */
|
||||
.chroma .kp {
|
||||
color: #66d9ef;
|
||||
/* Literal, LiteralStringEscape, LiteralNumber, LiteralNumberBin, LiteralNumberFloat, LiteralNumberHex, LiteralNumberInteger, LiteralNumberIntegerLong, LiteralNumberOct */
|
||||
.chroma .l, .chroma .se, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
|
||||
color: #{$salmon-300};
|
||||
}
|
||||
/* KeywordReserved */
|
||||
.chroma .kr {
|
||||
color: #66d9ef;
|
||||
/* LiteralDate, LiteralString, LiteralStringAffix, LiteralStringBacktick, LiteralStringChar, LiteralStringDelimiter, LiteralStringDoc, LiteralStringDouble, LiteralStringHeredoc, LiteralStringInterpol, LiteralStringOther, LiteralStringRegex, LiteralStringSingle, LiteralStringSymbol */
|
||||
.chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss {
|
||||
color: #{$sun-300};
|
||||
}
|
||||
/* KeywordType */
|
||||
.chroma .kt {
|
||||
color: #66d9ef;
|
||||
}
|
||||
/* Name */
|
||||
.chroma .n {
|
||||
}
|
||||
/* NameAttribute */
|
||||
.chroma .na {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* NameBuiltin */
|
||||
.chroma .nb {
|
||||
}
|
||||
/* NameBuiltinPseudo */
|
||||
.chroma .bp {
|
||||
}
|
||||
/* NameClass */
|
||||
.chroma .nc {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* NameConstant */
|
||||
.chroma .no {
|
||||
color: #66d9ef;
|
||||
}
|
||||
/* NameDecorator */
|
||||
.chroma .nd {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* NameEntity */
|
||||
.chroma .ni {
|
||||
}
|
||||
/* NameException */
|
||||
.chroma .ne {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* NameFunction */
|
||||
.chroma .nf {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* NameFunctionMagic */
|
||||
.chroma .fm {
|
||||
}
|
||||
/* NameLabel */
|
||||
.chroma .nl {
|
||||
}
|
||||
/* NameNamespace */
|
||||
.chroma .nn {
|
||||
}
|
||||
/* NameOther */
|
||||
.chroma .nx {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* NameProperty */
|
||||
.chroma .py {
|
||||
}
|
||||
/* NameTag */
|
||||
.chroma .nt {
|
||||
color: #f92672;
|
||||
}
|
||||
/* NameVariable */
|
||||
.chroma .nv {
|
||||
}
|
||||
/* NameVariableClass */
|
||||
.chroma .vc {
|
||||
}
|
||||
/* NameVariableGlobal */
|
||||
.chroma .vg {
|
||||
}
|
||||
/* NameVariableInstance */
|
||||
.chroma .vi {
|
||||
}
|
||||
/* NameVariableMagic */
|
||||
.chroma .vm {
|
||||
}
|
||||
/* Literal */
|
||||
.chroma .l {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralDate */
|
||||
.chroma .ld {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralString */
|
||||
.chroma .s {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringAffix */
|
||||
.chroma .sa {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringBacktick */
|
||||
.chroma .sb {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringChar */
|
||||
.chroma .sc {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringDelimiter */
|
||||
.chroma .dl {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringDoc */
|
||||
.chroma .sd {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringDouble */
|
||||
.chroma .s2 {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringEscape */
|
||||
.chroma .se {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralStringHeredoc */
|
||||
.chroma .sh {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringInterpol */
|
||||
.chroma .si {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringOther */
|
||||
.chroma .sx {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringRegex */
|
||||
.chroma .sr {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringSingle */
|
||||
.chroma .s1 {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralStringSymbol */
|
||||
.chroma .ss {
|
||||
color: #e6db74;
|
||||
}
|
||||
/* LiteralNumber */
|
||||
.chroma .m {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralNumberBin */
|
||||
.chroma .mb {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralNumberFloat */
|
||||
.chroma .mf {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralNumberHex */
|
||||
.chroma .mh {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralNumberInteger */
|
||||
.chroma .mi {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralNumberIntegerLong */
|
||||
.chroma .il {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* LiteralNumberOct */
|
||||
.chroma .mo {
|
||||
color: #ae81ff;
|
||||
}
|
||||
/* Operator */
|
||||
.chroma .o {
|
||||
color: #f92672;
|
||||
}
|
||||
/* OperatorWord */
|
||||
.chroma .ow {
|
||||
color: #f92672;
|
||||
}
|
||||
/* Punctuation */
|
||||
.chroma .p {
|
||||
}
|
||||
/* Comment */
|
||||
.chroma .c {
|
||||
color: #75715e;
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.chroma .ch {
|
||||
color: #75715e;
|
||||
}
|
||||
/* CommentMultiline */
|
||||
.chroma .cm {
|
||||
color: #75715e;
|
||||
}
|
||||
/* CommentSingle */
|
||||
.chroma .c1 {
|
||||
color: #75715e;
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.chroma .cs {
|
||||
color: #75715e;
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.chroma .cp {
|
||||
color: #75715e;
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.chroma .cpf {
|
||||
color: #75715e;
|
||||
}
|
||||
/* Generic */
|
||||
.chroma .g {
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.chroma .gd {
|
||||
color: #f92672;
|
||||
/* Comment, CommentHashbang, CommentMultiline, CommentSingle, CommentSpecial, CommentPreproc, CommentPreprocFile, GenericSubheading */
|
||||
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf, .chroma .gu {
|
||||
color: #{$fog-300};
|
||||
}
|
||||
/* GenericEmph */
|
||||
.chroma .ge {
|
||||
font-style: italic;
|
||||
}
|
||||
/* GenericError */
|
||||
.chroma .gr {
|
||||
}
|
||||
/* GenericHeading */
|
||||
.chroma .gh {
|
||||
}
|
||||
/* GenericInserted */
|
||||
.chroma .gi {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* GenericOutput */
|
||||
.chroma .go {
|
||||
color: #6cb6d4;
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.chroma .gp {
|
||||
}
|
||||
/* GenericStrong */
|
||||
.chroma .gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.chroma .gu {
|
||||
color: #75715e;
|
||||
// Add custom border radius
|
||||
.highlight {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.chroma .gt {
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.chroma .gl {
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.chroma .w {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -42,12 +42,12 @@
|
|||
}
|
||||
|
||||
&.active-parent {
|
||||
border-left-color: $brightSun !important;
|
||||
border-left-color: #{$aqua-400} !important;
|
||||
|
||||
}
|
||||
&:hover, &.active {
|
||||
color: var(--body-color);
|
||||
border-left-color: $brightSun;
|
||||
border-left-color: #{$aqua-400};
|
||||
background-color: var(--nav-highlight-color) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,105 @@ $font-size-root: 18px !default;
|
|||
$font-size-base: 1.125rem !default;
|
||||
$body-font-size: 19px !default;
|
||||
|
||||
|
||||
// New color variables are below. The previous color variable found at the bottom of this file will be translated to these or removed once these new colors have been applied to enough of the docs content.
|
||||
|
||||
// Grayscale palette. These are equivalent to varying opacities of the darkest shade over white (e.g. $fog-500 is equivalent to $fog-1000 at 50% opacity over white).
|
||||
$fog-0: #FFFFFF !default;
|
||||
$fog-25: #F9F9F9 !default;
|
||||
$fog-50: #F2F3F3 !default;
|
||||
$fog-75: #ECEDED !default;
|
||||
$fog-100: #E6E7E7 !default;
|
||||
$fog-150: #DADCDC !default;
|
||||
$fog-200: #CDD0D0 !default;
|
||||
$fog-300: #B4B8B8 !default;
|
||||
$fog-400: #9BA1A1 !default;
|
||||
$fog-500: #828A89 !default;
|
||||
$fog-600: #697371 !default;
|
||||
$fog-700: #505B59 !default;
|
||||
$fog-800: #374442 !default;
|
||||
$fog-850: #2A3836 !default;
|
||||
$fog-900: #1E2C2A !default;
|
||||
$fog-950: #12211F !default;
|
||||
$fog-1000: #051513 !default;
|
||||
|
||||
// Colored palettes. Spectrums gradually transition into white with numbers below "-500" and transition into $fog-1000 on numbers after "-500".
|
||||
|
||||
// $Aqua-500 is the teal color pulled from the Crossplane popsicle logo. This is the primary color to be used for actions.
|
||||
$aqua-25: #F5FDFB !default;
|
||||
$aqua-50: #EAFAF8 !default;
|
||||
$aqua-75: #E1F8F5 !default;
|
||||
$aqua-100: #D7F6F1 !default;
|
||||
$aqua-150: #C2F1EA !default;
|
||||
$aqua-200: #AEECE3 !default;
|
||||
$aqua-300: #86E3D6 !default;
|
||||
$aqua-400: #5DD9C8 !default;
|
||||
$aqua-500: #35D0BA !default;
|
||||
$aqua-600: #2BAA99 !default;
|
||||
$aqua-700: #228578 !default;
|
||||
$aqua-800: #186055 !default;
|
||||
$aqua-850: #134E45 !default;
|
||||
$aqua-900: #0F3B34 !default;
|
||||
$aqua-950: #092824 !default;
|
||||
|
||||
// $Grass-500 is the middle-point between $Aqua-500 and $Sun-500.
|
||||
$grass-100: #EBF5E5 !default;
|
||||
$grass-200: #D7ECCA !default;
|
||||
$grass-300: #C2E2B0 !default;
|
||||
$grass-400: #AED995 !default;
|
||||
$grass-500: #9ACF7B !default;
|
||||
$grass-600: #7CAA66 !default;
|
||||
$grass-700: #5E8452 !default;
|
||||
$grass-800: #41603C !default;
|
||||
$grass-900: #233A28 !default;
|
||||
$grass-950: #14271D !default;
|
||||
|
||||
// $Sun-500 is pulled from the Crossplane popsicle logo.
|
||||
$sun-25: #FFFCF5 !default;
|
||||
$sun-50: #FFFAEB !default;
|
||||
$sun-75: #FFF8E2 !default;
|
||||
$sun-100: #FFF5D8 !default;
|
||||
$sun-150: #FFF0C4 !default;
|
||||
$sun-200: #FFEBB1 !default;
|
||||
$sun-300: #FFE18A !default;
|
||||
$sun-400: #FFD763 !default;
|
||||
$sun-500: #FFCD3C !default;
|
||||
$sun-600: #CDA834 !default;
|
||||
$sun-700: #9B832C !default;
|
||||
$sun-800: #695F23 !default;
|
||||
$sun-850: #504D1F !default;
|
||||
$sun-900: #373A1B !default;
|
||||
$sun-950: #1E2817 !default;
|
||||
|
||||
// $Tangerine-500 is the middle-point between $Sun-500 and $Salmon-500.
|
||||
$tangerine-100: #FEEDDE !default;
|
||||
$tangerine-200: #FDDBBE !default;
|
||||
$tangerine-300: #FBCA9D !default;
|
||||
$tangerine-400: #FAB87D !default;
|
||||
$tangerine-500: #F9A65C !default;
|
||||
$tangerine-600: #C8894E !default;
|
||||
$tangerine-700: #976C3F !default;
|
||||
$tangerine-800: #674F30 !default;
|
||||
$tangerine-900: #363221 !default;
|
||||
|
||||
// $Salmon-500 is pulled from the Crossplane popsicle logo.
|
||||
$salmon-25: #FEF9F8 !default;
|
||||
$salmon-50: #FEF2F2 !default;
|
||||
$salmon-75: #FDECEB !default;
|
||||
$salmon-100: #FDE6E5 !default;
|
||||
$salmon-150: #FBD9D7 !default;
|
||||
$salmon-200: #FACCCA !default;
|
||||
$salmon-300: #F8B3B0 !default;
|
||||
$salmon-400: #F59995 !default;
|
||||
$salmon-500: #F3807B !default;
|
||||
$salmon-600: #C36A66 !default;
|
||||
$salmon-700: #945552 !default;
|
||||
$salmon-800: #64403C !default;
|
||||
$salmon-850: #4C3632 !default;
|
||||
$salmon-900: #352B28 !default;
|
||||
$salmon-950: #1D201E !default;
|
||||
|
||||
|
||||
$aquaMarine: #3de2cb !default;
|
||||
$aquarius: #37ccb7 !default;
|
||||
$fillBlackBlack: #183b56 !default;
|
||||
|
|
@ -22,13 +121,13 @@ $brightSun: #ffcd3c !default;
|
|||
$froly: #f3807b !default;
|
||||
$blueBayoux: #5A7184 !default;
|
||||
|
||||
$navbar-background-color: #183d54 !default;
|
||||
$navbar-link-color: rgba(255,255,255,.85) !default;
|
||||
$navbar-link-color-hover: rgba(255,255,255,1) !default;
|
||||
$navbar-background-color: #{$fog-1000} !default;
|
||||
$navbar-link-color: #{$fog-0} !default;
|
||||
$navbar-link-color-hover: #{$fog-200} !default;
|
||||
$navbar-link-font-size: 17px !default;
|
||||
$navbar-link-padding-left: 16px !default;
|
||||
$navbar-link-padding-right: 16px !default;
|
||||
$navbar-background: #183d54 !default;
|
||||
$navbar-background: #{$fog-1000} !default;
|
||||
|
||||
$body-font-weight: normal !default;
|
||||
$body-min-width: 20rem !default;
|
||||
|
|
|
|||
|
|
@ -1,51 +1,51 @@
|
|||
@mixin dark-mode {
|
||||
// body and content
|
||||
--body-background: #1F2937;
|
||||
--body-font-color: #FAFAFA;
|
||||
--content-link-color: #8bcbe6;
|
||||
--anchor-link-color: #{darken(#FAFAFA, 25)};
|
||||
--body-background: #{$fog-1000};
|
||||
--body-font-color: #{$fog-0};
|
||||
--content-link-color: #{$aqua-400};
|
||||
--anchor-link-color: #{$fog-400};
|
||||
|
||||
// Single code lines inside text. Code blocks are in _code_theme_dark.scss
|
||||
--code-background: #3D4856;
|
||||
--code-color: #f8f9fa;
|
||||
--code-line-number-color: #8bcbe6;
|
||||
--code-background: #{$fog-900};
|
||||
--code-color: #{$fog-300};
|
||||
--code-line-number-color: #{$aqua-300};
|
||||
|
||||
//Tabs
|
||||
--nav-tab-background-color: var(--body-background);
|
||||
--active-tab-color: #ffcd3c;
|
||||
--inactive-tab-hover-color: #37ccb7;
|
||||
--active-tab-color: #{$aqua-400};
|
||||
--inactive-tab-hover-color: #{$fog-0};
|
||||
|
||||
// Sidebar nav
|
||||
--nav-highlight-color: #2e3d52;
|
||||
--nav-highlight-color: #{$aqua-950};
|
||||
--btn-close-color: invert(1) grayscale(100%) brightness(200%);
|
||||
|
||||
//Version dropdown
|
||||
--dropdown-highlight: var(--nav-highlight-color);
|
||||
--dropdown-highlight: #{$fog-900};
|
||||
--dropdown-background: var(--body-background);
|
||||
--latest-pill-background: #f3807b;
|
||||
--latest-pill-color: #141414;
|
||||
--dropdown-color: var(--body-font-color);
|
||||
--dropdown-border-color: #{lighten(#FAFAFA, 50)};
|
||||
--latest-pill-background: #{$fog-800};
|
||||
--latest-pill-color: #{$fog-200};
|
||||
--dropdown-color: #{$fog-0};
|
||||
--dropdown-border-color: #{$fog-900};
|
||||
|
||||
//Right-side table of contents
|
||||
--toc-font-color: #{darken(#FAFAFA, 15)};
|
||||
--toc-mobile-menu-outline: #ffcd3c;
|
||||
--toc-mobile-menu-background: #2e3d52;
|
||||
--toc-font-color: #{$fog-400};
|
||||
--toc-mobile-menu-outline: #{$fog-800};
|
||||
--toc-mobile-menu-background: #{$fog-1000};
|
||||
|
||||
//hint boxes
|
||||
--hint-important: rgba(255, 145, 0, 1); //"exclamation",
|
||||
--hint-important-background: rgba(255, 145, 0, .1);
|
||||
--hint-important: #{tangerine-400}; //"exclamation",
|
||||
--hint-important-background: #{tangerine-950};
|
||||
|
||||
--hint-warning: rgba(255, 82, 82, 1); //"fire",
|
||||
--hint-warning-background: rgba(255, 82, 82, .1);
|
||||
--hint-warning: #{$salmon-400}; //"fire",
|
||||
--hint-warning-background: #{$salmon-950};
|
||||
|
||||
--hint-tip: rgba(0,200,82,1);; //"check",
|
||||
--hint-tip-background: rgba(0,200,82,.1);
|
||||
--hint-tip: #{$grass-400}; //"check",
|
||||
--hint-tip-background: #{$grass-950};
|
||||
|
||||
--hint-note: rgba(0,176,255,1); //"info",
|
||||
--hint-note-background: rgba(0,176,255,.1);
|
||||
--hint-note: #{$fog-400}; //"info",
|
||||
--hint-note-background: #{$fog-950};
|
||||
|
||||
//Search Related
|
||||
--search-box-background: #3D4856;
|
||||
--result-path: #e3f5ff;
|
||||
}
|
||||
--search-box-background: #{$fog-800};
|
||||
--result-path: #{$fog-0};
|
||||
}
|
||||
Loading…
Reference in New Issue