diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 9e320fc061..ce78d974bf 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -19,20 +19,48 @@ themesdir = "../.." disableLandingPageButton = true disableMermaid = false titleSeparator = "::" - themeVariant = "relearn" + themeVariant = "relearn-light" disableSeoHiddenPages = true [outputs] - home = ["HTML", "RSS", "JSON"] # add JSON to the home page to support lunr search + # add JSON to the home page to support lunr search; This is a mandatory setting + # for the search functionality + home = ["HTML", "RSS", "JSON"] [markup] [markup.highlight] - style = "tango" # choose a color theme or create your own - guessSyntax = false # if set to true, avoid unstyled code if no language was given but mermaid code fences will not work anymore + # if set to `guessSyntax = true`, there will be no unstyled code even if no language + # was given BUT mermaid code fences will not work anymore! So this is a mandatory + # setting for your site + guessSyntax = false -[markup.goldmark.renderer] - unsafe= true + # here in this showcase we use our own modified chroma syntax highlightning style + # which is imported in theme-relearn-light.css / theme-relearn-dark.css; + # if you want to use a predefined style instead: + # - remove the following `noClasses` + # - set the following `style` to a predefined style name + # - remove the `@import` of the self-defined chroma stylesheet from your CSS files + # (here eg.: theme-relearn-light.css / theme-relearn-dark.css) + noClasses = false + # style = "base16-snazzy" + [markup.goldmark.renderer] + # activated for this showcase to use HTML and JavaScript; decide on your own needs; + # if in doubt, remove this line + unsafe = true + +# allows `hugo server` to display this showcase in IE11; this is used for testing, as we +# are still supporting IE11 - although with degraded experience; if you don't care about +# `hugo server` or browsers of ancient times, fell free to remove this whole block +[server] + [[server.headers]] + for = "**.html" + [server.headers.values] + X-UA-Compatible = "IE=edge" + +# showcase of the menu shortcuts; you can use relative URLs linking +# to your content or use fully-quallified URLs to link outside of +# your project [Languages] [Languages.en] title = "Documentation for Hugo Relearn Theme" @@ -68,6 +96,11 @@ themesdir = "../.." url = "tags/" weight = 40 + # this ourrr way t' showcase th' multilang settings by + # doing autotrrranlat'n of th' english content; we are + # lazy and don't supporrt furrrther trrranslations; arrr, + # don't take it t' serrrious, fello'; it's prrretty hacky and: + # NOT MEANT FOR PRRRODUCTION! ARRR! [Languages.pir] title = "Documentat'n fer Cap'n Hugo Relearrrn Theme" weight = 1 diff --git a/exampleSite/content/basics/customization/_index.en.md b/exampleSite/content/basics/customization/_index.en.md index 39eddc5921..e148e86306 100644 --- a/exampleSite/content/basics/customization/_index.en.md +++ b/exampleSite/content/basics/customization/_index.en.md @@ -95,35 +95,41 @@ First, create a new CSS file in your local `static/css` folder prefixed by `them ```css :root { - --MAIN-TEXT-color: #323232; /* Color of text by default */ - --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */ - --MAIN-LINK-color: #1C90F3; /* Color of links */ - --MAIN-LINK-HOVER-color: #167ad0; /* Color of hovered links */ - --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */ + --MAIN-TEXT-color: #101010; /* Color of text by default */ + --MAIN-TITLES-TEXT-color: #444753; /* Color of titles h2-h3-h4-h5-h6 */ + --MAIN-LINK-color: #486ac9; /* Color of links */ + --MAIN-LINK-HOVER-color: #134fbf; /* Color of hovered links */ + --MAIN-ANCHOR-color: #486ac9; /* color of anchors on titles */ + --MAIN-BG-color: #ffffff; /* color of text by default */ - /* adjusted to monokai chroma style */ - --MAIN-CODE-color: #e2e4e5; /* fallback color for code text */ - --MAIN-CODE-BG-color: #282a36; /* fallback color for code background */ + /* adjusted to relearn-light chroma style */ + --CODE-BLOCK-color: #000000; /* fallback color for block code text */ + --CODE-BLOCK-BG-color: #f8f8f8; /* fallback color for block code background */ + --CODE-BLOCK-BORDER-color: #d8d8d8; /* color of block code border */ + + --CODE-INLINE-color: #5e5e5e; /* color for inline code text */ + --CODE-INLINE-BG-color: #fffae9; /* color for inline code background */ + --CODE-INLINE-BORDER-color: #f8e8c8; /* color of inline code border */ --MENU-HOME-LINK-color: #323232; /* Color of the home button text */ - --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */ + --MENU-HOME-LINK-HOVER-color: #808080; /* Color of the hovered home button text */ - --MENU-HEADER-BG-color: #1C90F3; /* Background color of menu header */ - --MENU-HEADER-BORDER-color: #33a1ff; /*Color of menu header border */ + --MENU-HEADER-BG-color: #7dc903; /* Background color of menu header */ + --MENU-HEADER-BORDER-color: #7dc903; /*Color of menu header border */ - --MENU-SEARCH-BG-color: #167ad0; /* Search field background color (by default borders + icons) */ - --MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */ - --MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* Override search field icons color */ + --MENU-SEARCH-color: #efefef; /* Color of search field text */ + --MENU-SEARCH-BG-color: #3d414d; /* Search field background color (by default borders + icons) */ + --MENU-SEARCH-BOX-color: #efefef; /* Override search field border color */ - --MENU-SECTIONS-ACTIVE-BG-color: #20272b; /* Background color of the active section and its children */ - --MENU-SECTIONS-BG-color: #252c31; /* Background color of other sections */ - --MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */ - --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6; /* Color of links in menu, when hovered */ - --MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */ - --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */ + --MENU-SECTIONS-ACTIVE-BG-color: #202028; /* Background color of the active section and its children */ + --MENU-SECTIONS-BG-color: #282830; /* Background color of other sections */ + --MENU-SECTIONS-LINK-color: #bababa; /* Color of links in menu */ + --MENU-SECTIONS-LINK-HOVER-color: #ffffff; /* Color of links in menu, when hovered */ + --MENU-SECTION-ACTIVE-CATEGORY-color: #444444; /* Color of active category text */ + --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */ - --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */ - --MENU-SECTION-HR-color: #20272b; /* Color of
separator in menu */ + --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */ + --MENU-SECTION-HR-color: #282830; /* Color of
separator in menu */ } ``` diff --git a/exampleSite/content/cont/syntaxhighlight.en.md b/exampleSite/content/cont/syntaxhighlight.en.md index b6db6875c3..50d741d3bc 100644 --- a/exampleSite/content/cont/syntaxhighlight.en.md +++ b/exampleSite/content/cont/syntaxhighlight.en.md @@ -56,6 +56,11 @@ You can choose a color theme from the [list of supported themes](https://xyproto ````toml [markup] [markup.highlight] - style = "base16-snazzy" # choose a color theme or create your own - guessSyntax = false # if set to true, avoid unstyled code if no language was given but mermaid code fences will not work anymore + # if set to `guessSyntax = true`, there will be no unstyled code even if no language + # was given BUT mermaid code fences will not work anymore! So this is a mandatory + # setting for your site + guessSyntax = false + + # choose a color theme or create your own + style = "base16-snazzy" ```` diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md index 55ee672205..ea9b789906 100644 --- a/exampleSite/content/shortcodes/mermaid.en.md +++ b/exampleSite/content/shortcodes/mermaid.en.md @@ -215,7 +215,10 @@ Also, if you want to use mermaid codefences, you have to turn off `guessSyntax` [markup] [markup.highlight] - guessSyntax = false # if set to true, avoid unstyled code if no language was given but mermaid code fences will not work anymore + # if set to `guessSyntax = true`, there will be no unstyled code even if no language + # was given BUT mermaid code fences will not work anymore! So this is a mandatory + # setting for your site + guessSyntax = false ```` or pages frontmatter diff --git a/exampleSite/content/shortcodes/notice.en.md b/exampleSite/content/shortcodes/notice.en.md index 2bdcc23b14..9d15859f4d 100644 --- a/exampleSite/content/shortcodes/notice.en.md +++ b/exampleSite/content/shortcodes/notice.en.md @@ -195,17 +195,17 @@ You can add: ```` {{% /expand %}} -### Notice with Custom Title +### Notice with custom title and default color You can customize the title of the notice by passing it as a second parameter. -{{% notice note "Pay Attention to this Note!" %}} +{{% notice default "Pay Attention to this Note!" %}} The title is now the parameter that was provided. {{% /notice %}} {{% expand "Show markup" %}} ````go -{{%/* notice note "Pay Attention to this Note!" */%}} +{{%/* notice default "Pay Attention to this Note!" */%}} The title is now the parameter that was provided. {{%/* /notice */%}} ```` diff --git a/layouts/partials/header.html b/layouts/partials/header.html index b423e04c47..1c7e8e9107 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -30,7 +30,7 @@
{{- if not .IsHome }} -
+
{{- if and (or .IsPage .IsSection) .Site.Params.editURL }} {{- $File := .File }} {{- $Site := .Site }} @@ -70,7 +70,7 @@ {{- if $toc }} {{- partial "toc.html" . }} {{- end }} -
+
{{- end }}
{{- partial "tags.html" . }} diff --git a/static/css/chroma-relearn-dark.css b/static/css/chroma-relearn-dark.css new file mode 100644 index 0000000000..0ecb3c7b4b --- /dev/null +++ b/static/css/chroma-relearn-dark.css @@ -0,0 +1,83 @@ +/* based on monokai +/* Background */ .chroma { color: #f8f8f8; background-color: #2b2b2b } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { color: #960050; } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* Keyword */ .chroma .k { color: #66d9ef } +/* KeywordConstant */ .chroma .kc { color: #66d9ef } +/* KeywordDeclaration */ .chroma .kd { color: #66d9ef } +/* KeywordNamespace */ .chroma .kn { color: #f92672 } +/* KeywordPseudo */ .chroma .kp { color: #66d9ef } +/* KeywordReserved */ .chroma .kr { color: #66d9ef } +/* 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: #7c7c7c } +/* CommentHashbang */ .chroma .ch { color: #7c7c7c } +/* CommentMultiline */ .chroma .cm { color: #7c7c7c } +/* CommentSingle */ .chroma .c1 { color: #7c7c7c } +/* CommentSpecial */ .chroma .cs { color: #7c7c7c } +/* CommentPreproc */ .chroma .cp { color: #7c7c7c } +/* CommentPreprocFile */ .chroma .cpf { color: #7c7c7c } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color: #f92672 } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericError */ .chroma .gr { } +/* GenericHeading */ .chroma .gh { } +/* GenericInserted */ .chroma .gi { color: #a6e22e } +/* GenericOutput */ .chroma .go { } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #7c7c7c } +/* GenericTraceback */ .chroma .gt { } +/* GenericUnderline */ .chroma .gl { } +/* TextWhitespace */ .chroma .w { } diff --git a/static/css/chroma-relearn-light.css b/static/css/chroma-relearn-light.css new file mode 100644 index 0000000000..44bc9890ef --- /dev/null +++ b/static/css/chroma-relearn-light.css @@ -0,0 +1,83 @@ +/* based on tango +/* Background */ .chroma { background-color: #f8f8f8 } +/* Other */ .chroma .x { color: #000000 } +/* Error */ .chroma .err { color: #a40000 } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* Keyword */ .chroma .k { color: #204a87; font-weight: bold } +/* KeywordConstant */ .chroma .kc { color: #204a87; font-weight: bold } +/* KeywordDeclaration */ .chroma .kd { color: #204a87; font-weight: bold } +/* KeywordNamespace */ .chroma .kn { color: #204a87; font-weight: bold } +/* KeywordPseudo */ .chroma .kp { color: #204a87; font-weight: bold } +/* KeywordReserved */ .chroma .kr { color: #204a87; font-weight: bold } +/* KeywordType */ .chroma .kt { color: #204a87; font-weight: bold } +/* Name */ .chroma .n { color: #000000 } +/* NameAttribute */ .chroma .na { color: #c4a000 } +/* NameBuiltin */ .chroma .nb { color: #204a87 } +/* NameBuiltinPseudo */ .chroma .bp { color: #3465a4 } +/* NameClass */ .chroma .nc { color: #000000 } +/* NameConstant */ .chroma .no { color: #000000 } +/* NameDecorator */ .chroma .nd { color: #5c35cc; font-weight: bold } +/* NameEntity */ .chroma .ni { color: #ce5c00 } +/* NameException */ .chroma .ne { color: #cc0000; font-weight: bold } +/* NameFunction */ .chroma .nf { color: #000000 } +/* NameFunctionMagic */ .chroma .fm { color: #000000 } +/* NameLabel */ .chroma .nl { color: #f57900 } +/* NameNamespace */ .chroma .nn { color: #000000 } +/* NameOther */ .chroma .nx { color: #000000 } +/* NameProperty */ .chroma .py { color: #000000 } +/* NameTag */ .chroma .nt { color: #204a87; font-weight: bold } +/* NameVariable */ .chroma .nv { color: #000000 } +/* NameVariableClass */ .chroma .vc { color: #000000 } +/* NameVariableGlobal */ .chroma .vg { color: #000000 } +/* NameVariableInstance */ .chroma .vi { color: #000000 } +/* NameVariableMagic */ .chroma .vm { color: #000000 } +/* Literal */ .chroma .l { color: #000000 } +/* LiteralDate */ .chroma .ld { color: #000000 } +/* LiteralString */ .chroma .s { color: #4e9a06 } +/* LiteralStringAffix */ .chroma .sa { color: #4e9a06 } +/* LiteralStringBacktick */ .chroma .sb { color: #4e9a06 } +/* LiteralStringChar */ .chroma .sc { color: #4e9a06 } +/* LiteralStringDelimiter */ .chroma .dl { color: #4e9a06 } +/* LiteralStringDoc */ .chroma .sd { color: #8f5902; font-style: italic } +/* LiteralStringDouble */ .chroma .s2 { color: #4e9a06 } +/* LiteralStringEscape */ .chroma .se { color: #4e9a06 } +/* LiteralStringHeredoc */ .chroma .sh { color: #4e9a06 } +/* LiteralStringInterpol */ .chroma .si { color: #4e9a06 } +/* LiteralStringOther */ .chroma .sx { color: #4e9a06 } +/* LiteralStringRegex */ .chroma .sr { color: #4e9a06 } +/* LiteralStringSingle */ .chroma .s1 { color: #4e9a06 } +/* LiteralStringSymbol */ .chroma .ss { color: #4e9a06 } +/* LiteralNumber */ .chroma .m { color: #0000cf; font-weight: bold } +/* LiteralNumberBin */ .chroma .mb { color: #0000cf; font-weight: bold } +/* LiteralNumberFloat */ .chroma .mf { color: #0000cf; font-weight: bold } +/* LiteralNumberHex */ .chroma .mh { color: #0000cf; font-weight: bold } +/* LiteralNumberInteger */ .chroma .mi { color: #0000cf; font-weight: bold } +/* LiteralNumberIntegerLong */ .chroma .il { color: #0000cf; font-weight: bold } +/* LiteralNumberOct */ .chroma .mo { color: #0000cf; font-weight: bold } +/* Operator */ .chroma .o { color: #ce5c00; font-weight: bold } +/* OperatorWord */ .chroma .ow { color: #204a87; font-weight: bold } +/* Punctuation */ .chroma .p { color: #000000; font-weight: bold } +/* Comment */ .chroma .c { color: #8f5902; font-style: italic } +/* CommentHashbang */ .chroma .ch { color: #8f5902; font-style: italic } +/* CommentMultiline */ .chroma .cm { color: #8f5902; font-style: italic } +/* CommentSingle */ .chroma .c1 { color: #8f5902; font-style: italic } +/* CommentSpecial */ .chroma .cs { color: #8f5902; font-style: italic } +/* CommentPreproc */ .chroma .cp { color: #8f5902; font-style: italic } +/* CommentPreprocFile */ .chroma .cpf { color: #8f5902; font-style: italic } +/* Generic */ .chroma .g { color: #000000 } +/* GenericDeleted */ .chroma .gd { color: #a40000 } +/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic } +/* GenericError */ .chroma .gr { color: #ef2929 } +/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold } +/* GenericInserted */ .chroma .gi { color: #00a000 } +/* GenericOutput */ .chroma .go { color: #000000; font-style: italic } +/* GenericPrompt */ .chroma .gp { color: #8f5902 } +/* GenericStrong */ .chroma .gs { color: #000000; font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold } +/* GenericTraceback */ .chroma .gt { color: #a40000; font-weight: bold } +/* GenericUnderline */ .chroma .gl { color: #000000; text-decoration: underline } +/* TextWhitespace */ .chroma .w { color: #f8f8f8; text-decoration: underline } diff --git a/static/css/theme-blue.css b/static/css/theme-blue.css index 76f8ea5fb8..5c964cb8cc 100644 --- a/static/css/theme-blue.css +++ b/static/css/theme-blue.css @@ -4,10 +4,16 @@ --MAIN-LINK-color: #1C90F3; /* Color of links */ --MAIN-LINK-HOVER-color: #167ad0; /* Color of hovered links */ --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */ + --MAIN-BG-color: #ffffff; /* color of text by default */ - /* adjusted to monokai chroma style */ - --MAIN-CODE-color: #e2e4e5; /* fallback color for code text */ - --MAIN-CODE-BG-color: #282a36; /* fallback color for code background */ + /* adjusted to base16-snazzy chroma style */ + --CODE-BLOCK-color: #e2e4e5; /* fallback color for code text */ + --CODE-BLOCK-BG-color: #282a36; /* fallback color for code background */ + --CODE-BLOCK-BORDER-color: #282a36; /* color of block code border */ + + --CODE-INLINE-color: #5e5e5e; /* color for inline code text */ + --CODE-INLINE-BG-color: #fffae9; /* color for inline code background */ + --CODE-INLINE-BORDER-color: #f8e8c8; /* color of inline code border */ --MENU-HOME-LINK-color: #323232; /* Color of the home button text */ --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */ @@ -15,9 +21,9 @@ --MENU-HEADER-BG-color: #1C90F3; /* Background color of menu header */ --MENU-HEADER-BORDER-color: #33a1ff; /*Color of menu header border */ + --MENU-SEARCH-color: #ffffff; /* Color of search field text */ --MENU-SEARCH-BG-color: #167ad0; /* Search field background color (by default borders + icons) */ --MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */ - --MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* Override search field icons color */ --MENU-SECTIONS-ACTIVE-BG-color: #20272b; /* Background color of the active section and its children */ --MENU-SECTIONS-BG-color: #252c31; /* Background color of other sections */ diff --git a/static/css/theme-green.css b/static/css/theme-green.css index df948dd791..ac99752c9c 100644 --- a/static/css/theme-green.css +++ b/static/css/theme-green.css @@ -4,10 +4,16 @@ --MAIN-LINK-color: #599a3e; /* Color of links */ --MAIN-LINK-HOVER-color: #3f6d2c; /* Color of hovered links */ --MAIN-ANCHOR-color: #599a3e; /* color of anchors on titles */ + --MAIN-BG-color: #ffffff; /* color of text by default */ - /* adjusted to monokai chroma style */ - --MAIN-CODE-color: #e2e4e5; /* fallback color for code text */ - --MAIN-CODE-BG-color: #282a36; /* fallback color for code background */ + /* adjusted to base16-snazzy chroma style */ + --CODE-BLOCK-color: #e2e4e5; /* fallback color for code text */ + --CODE-BLOCK-BG-color: #282a36; /* fallback color for code background */ + --CODE-BLOCK-BORDER-color: #282a36; /* color of block code border */ + + --CODE-INLINE-color: #5e5e5e; /* color for inline code text */ + --CODE-INLINE-BG-color: #fffae9; /* color for inline code background */ + --CODE-INLINE-BORDER-color: #f8e8c8; /* color of inline code border */ --MENU-HOME-LINK-color: #323232; /* Color of the home button text */ --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */ @@ -15,9 +21,9 @@ --MENU-HEADER-BG-color: #74b559; /* Background color of menu header */ --MENU-HEADER-BORDER-color: #9cd484; /*Color of menu header border */ + --MENU-SEARCH-color: #ffffff; /* Color of search field text */ --MENU-SEARCH-BG-color: #599a3e; /* Search field background color (by default borders + icons) */ --MENU-SEARCH-BOX-color: #84c767; /* Override search field border color */ - --MENU-SEARCH-BOX-ICONS-color: #c7f7c4; /* Override search field icons color */ --MENU-SECTIONS-ACTIVE-BG-color: #1b211c; /* Background color of the active section and its children */ --MENU-SECTIONS-BG-color: #222723; /* Background color of other sections */ diff --git a/static/css/theme-learn.css b/static/css/theme-learn.css new file mode 100644 index 0000000000..7d1789e6c0 --- /dev/null +++ b/static/css/theme-learn.css @@ -0,0 +1,37 @@ +:root { + --MAIN-TEXT-color: #323232; /* Color of text by default */ + --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */ + --MAIN-LINK-color: #00bdf3; /* Color of links */ + --MAIN-LINK-HOVER-color: #0082a7; /* Color of hovered links */ + --MAIN-ANCHOR-color: #00bdf3; /* color of anchors on titles */ + --MAIN-BG-color: #ffffff; /* color of text by default */ + + /* adjusted to base16-snazzy chroma style */ + --CODE-BLOCK-color: #e2e4e5; /* fallback color for code text */ + --CODE-BLOCK-BG-color: #282a36; /* fallback color for code background */ + --CODE-BLOCK-BORDER-color: #282a36; /* color of block code border */ + + --CODE-INLINE-color: #5e5e5e; /* color for inline code text */ + --CODE-INLINE-BG-color: #fff7dd; /* color for inline code background */ + --CODE-INLINE-BORDER-color: #fbf0cb; /* color of inline code border */ + + --MENU-HOME-LINK-color: #cccccc; /* Color of the home button text */ + --MENU-HOME-LINK-HOVER-color: #e6e6e6; /* Color of the hovered home button text */ + + --MENU-HEADER-BG-color: #8451a1; /* Background color of menu header */ + --MENU-HEADER-BORDER-color: #9c6fb6; /*Color of menu header border */ + + --MENU-SEARCH-color: #ffffff; /* Color of search field text */ + --MENU-SEARCH-BG-color: #764890; /* Search field background color (by default borders + icons) */ + --MENU-SEARCH-BOX-color: #915eae; /* Override search field border color */ + + --MENU-SECTIONS-ACTIVE-BG-color: #251f29; /* Background color of the active section and its children */ + --MENU-SECTIONS-BG-color: #322a38; /* Background color of other sections */ + --MENU-SECTIONS-LINK-color: #cccccc; /* Color of links in menu */ + --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6; /* Color of links in menu, when hovered */ + --MENU-SECTION-ACTIVE-CATEGORY-color: #777777; /* Color of active category text */ + --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */ + + --MENU-VISITED-color: #00bdf3; /* Color of 'page visited' icons in menu */ + --MENU-SECTION-HR-color: #2a232f; /* Color of
separator in menu */ +} diff --git a/static/css/theme-red.css b/static/css/theme-red.css index 1c1790d8f2..38239570c1 100644 --- a/static/css/theme-red.css +++ b/static/css/theme-red.css @@ -4,10 +4,16 @@ --MAIN-LINK-color: #f31c1c; /* Color of links */ --MAIN-LINK-HOVER-color: #d01616; /* Color of hovered links */ --MAIN-ANCHOR-color: #f31c1c; /* color of anchors on titles */ + --MAIN-BG-color: #ffffff; /* color of text by default */ - /* adjusted to monokai chroma style */ - --MAIN-CODE-color: #e2e4e5; /* fallback color for code text */ - --MAIN-CODE-BG-color: #282a36; /* fallback color for code background */ + /* adjusted to base16-snazzy chroma style */ + --CODE-BLOCK-color: #e2e4e5; /* fallback color for code text */ + --CODE-BLOCK-BG-color: #282a36; /* fallback color for code background */ + --CODE-BLOCK-BORDER-color: #282a36; /* color of block code border */ + + --CODE-INLINE-color: #5e5e5e; /* color for inline code text */ + --CODE-INLINE-BG-color: #fffae9; /* color for inline code background */ + --CODE-INLINE-BORDER-color: #f8e8c8; /* color of inline code border */ --MENU-HOME-LINK-color: #ccc; /* Color of the home button text */ --MENU-HOME-LINK-HOVER-color: #e6e6e6; /* Color of the hovered home button text */ @@ -15,9 +21,9 @@ --MENU-HEADER-BG-color: #dc1010; /* Background color of menu header */ --MENU-HEADER-BORDER-color: #e23131; /*Color of menu header border */ + --MENU-SEARCH-color: #ffffff; /* Color of search field text */ --MENU-SEARCH-BG-color: #b90000; /* Search field background color (by default borders + icons) */ --MENU-SEARCH-BOX-color: #ef2020; /* Override search field border color */ - --MENU-SEARCH-BOX-ICONS-color: #fda1a1; /* Override search field icons color */ --MENU-SECTIONS-ACTIVE-BG-color: #2b2020; /* Background color of the active section and its children */ --MENU-SECTIONS-BG-color: #312525; /* Background color of other sections */ diff --git a/static/css/theme-relearn-dark.css b/static/css/theme-relearn-dark.css new file mode 100644 index 0000000000..edfaf3f12a --- /dev/null +++ b/static/css/theme-relearn-dark.css @@ -0,0 +1,44 @@ +/* here in this showcase we use our own modified chroma syntax highlightning style; + if you want to use a predefined style instead: + - remove `markup.highlight.noClasses` from your config.toml + - set `markup.highlight.style` to a predefined style name in your config.toml + - remove the following `@import` of the self-defined chroma stylesheet */ +@import "chroma-relearn-dark.css"; + +:root { + --MAIN-TEXT-color: #ffffff; /* Color of text by default */ + --MAIN-TITLES-TEXT-color: #7c7c7c; /* Color of titles h2-h3-h4-h5-h6 */ + --MAIN-LINK-color: #1c90f3; /* Color of links */ + --MAIN-LINK-HOVER-color: #4cabff; /* Color of hovered links */ + --MAIN-ANCHOR-color: #1c90f3; /* color of anchors on titles */ + --MAIN-BG-color: #202020; /* color for code background */ + + /* adjusted to relearn-dark chroma style */ + --CODE-BLOCK-color: #f8f8f8; /* fallback color for block code text */ + --CODE-BLOCK-BG-color: #2b2b2b; /* fallback color for block code background */ + --CODE-BLOCK-BORDER-color: #2b2b2b; /* color of block code border */ + + --CODE-INLINE-color: #82e550; /* color for inline code text */ + --CODE-INLINE-BG-color: #282a36; /* color for inline code background */ + --CODE-INLINE-BORDER-color: #464646; /* color of inline code border */ + + --MENU-HOME-LINK-color: #323232; /* Color of the home button text */ + --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */ + + --MENU-HEADER-BG-color: #7dc903; /* Background color of menu header */ + --MENU-HEADER-BORDER-color: #7dc903; /*Color of menu header border */ + + --MENU-SEARCH-color: #e0e0e0; /* Color of search field text */ + --MENU-SEARCH-BG-color: #323232; /* Search field background color (by default borders + icons) */ + --MENU-SEARCH-BOX-color: #e0e0e0; /* Override search field border color */ + + --MENU-SECTIONS-ACTIVE-BG-color: #323232; /* Background color of the active section and its children */ + --MENU-SECTIONS-BG-color: #2b2b2b; /* Background color of other sections */ + --MENU-SECTIONS-LINK-color: #bababa; /* Color of links in menu */ + --MENU-SECTIONS-LINK-HOVER-color: #ffffff; /* Color of links in menu, when hovered */ + --MENU-SECTION-ACTIVE-CATEGORY-color: #82e550; /* Color of active category text */ + --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #202020; /* Color of background for the active category (only) */ + + --MENU-VISITED-color: #569cd8; /* Color of 'page visited' icons in menu */ + --MENU-SECTION-HR-color: #282830; /* Color of
separator in menu */ +} diff --git a/static/css/theme-relearn-light.css b/static/css/theme-relearn-light.css new file mode 100644 index 0000000000..99d54baa1d --- /dev/null +++ b/static/css/theme-relearn-light.css @@ -0,0 +1,44 @@ +/* here in this showcase we use our own modified chroma syntax highlightning style; + if you want to use a predefined style instead: + - remove `markup.highlight.noClasses` from your config.toml + - set `markup.highlight.style` to a predefined style name in your config.toml + - remove the following `@import` of the self-defined chroma stylesheet */ +@import "chroma-relearn-light.css"; + +:root { + --MAIN-TEXT-color: #101010; /* Color of text by default */ + --MAIN-TITLES-TEXT-color: #444753; /* Color of titles h2-h3-h4-h5-h6 */ + --MAIN-LINK-color: #486ac9; /* Color of links */ + --MAIN-LINK-HOVER-color: #134fbf; /* Color of hovered links */ + --MAIN-ANCHOR-color: #486ac9; /* color of anchors on titles */ + --MAIN-BG-color: #ffffff; /* color of text by default */ + + /* adjusted to relearn-light chroma style */ + --CODE-BLOCK-color: #000000; /* fallback color for block code text */ + --CODE-BLOCK-BG-color: #f8f8f8; /* fallback color for block code background */ + --CODE-BLOCK-BORDER-color: #d8d8d8; /* color of block code border */ + + --CODE-INLINE-color: #5e5e5e; /* color for inline code text */ + --CODE-INLINE-BG-color: #fffae9; /* color for inline code background */ + --CODE-INLINE-BORDER-color: #f8e8c8; /* color of inline code border */ + + --MENU-HOME-LINK-color: #323232; /* Color of the home button text */ + --MENU-HOME-LINK-HOVER-color: #808080; /* Color of the hovered home button text */ + + --MENU-HEADER-BG-color: #7dc903; /* Background color of menu header */ + --MENU-HEADER-BORDER-color: #7dc903; /*Color of menu header border */ + + --MENU-SEARCH-color: #efefef; /* Color of search field text */ + --MENU-SEARCH-BG-color: #3d414d; /* Search field background color (by default borders + icons) */ + --MENU-SEARCH-BOX-color: #efefef; /* Override search field border color */ + + --MENU-SECTIONS-ACTIVE-BG-color: #202028; /* Background color of the active section and its children */ + --MENU-SECTIONS-BG-color: #282830; /* Background color of other sections */ + --MENU-SECTIONS-LINK-color: #bababa; /* Color of links in menu */ + --MENU-SECTIONS-LINK-HOVER-color: #ffffff; /* Color of links in menu, when hovered */ + --MENU-SECTION-ACTIVE-CATEGORY-color: #444444; /* Color of active category text */ + --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */ + + --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */ + --MENU-SECTION-HR-color: #282830; /* Color of
separator in menu */ +} diff --git a/static/css/theme-relearn.css b/static/css/theme-relearn.css index b21789a673..36aae7a570 100644 --- a/static/css/theme-relearn.css +++ b/static/css/theme-relearn.css @@ -1,31 +1,3 @@ -:root { - --MAIN-TEXT-color: #323232; /* Color of text by default */ - --MAIN-TITLES-TEXT-color: #444753; /* Color of titles h2-h3-h4-h5-h6 */ - --MAIN-LINK-color: #486ac9; /* Color of links */ - --MAIN-LINK-HOVER-color: #0044ff; /* Color of hovered links */ - --MAIN-ANCHOR-color: #486ac9; /* color of anchors on titles */ - - /* adjusted to tango chroma style */ - --MAIN-CODE-color: #000000; /* fallback color for code text */ - --MAIN-CODE-BG-color: #f8f8f8; /* fallback color for code background */ - - --MENU-HOME-LINK-color: #323232; /* Color of the home button text */ - --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */ - - --MENU-HEADER-BG-color: #7dc903; /* Background color of menu header */ - --MENU-HEADER-BORDER-color: #7dc903; /*Color of menu header border */ - - --MENU-SEARCH-BG-color: #3d414d; /* Search field background color (by default borders + icons) */ - --MENU-SEARCH-BOX-color: #efefef; /* Override search field border color */ - --MENU-SEARCH-BOX-ICONS-color: #ddd; /* Override search field icons color */ - - --MENU-SECTIONS-ACTIVE-BG-color: #202028; /* Background color of the active section and its children */ - --MENU-SECTIONS-BG-color: #282830; /* Background color of other sections */ - --MENU-SECTIONS-LINK-color: #bababa; /* Color of links in menu */ - --MENU-SECTIONS-LINK-HOVER-color: #fff; /* Color of links in menu, when hovered */ - --MENU-SECTION-ACTIVE-CATEGORY-color: #444; /* Color of active category text */ - --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */ - - --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */ - --MENU-SECTION-HR-color: #28292e; /* Color of
separator in menu */ -} +/* this file is here for compatiblity with older installations + use theme-relearn-light instead */ +@import "theme-relearn-light.css"; diff --git a/static/css/theme.css b/static/css/theme.css index 5b60557a86..589ac77e10 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -3,56 +3,46 @@ @import "tags.css"; @import "tabs.css"; -#top-github-link, #body #breadcrumbs { - position: relative; - top: 50%; - -webkit-transform: translateY(-50%); - -moz-transform: translateY(-50%); - -o-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); -} -.button, .button-secondary { - display: inline-block; - padding: 7px 12px; -} -.button:active, .button-secondary:active { - margin: 2px 0 -2px 0; -} @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 200; src: url("../fonts/WorkSans-ExtraLight.woff") format("woff2"), url("../fonts/WorkSans-ExtraLight.woff") format("woff"); } + @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 300; src: url("../fonts/WorkSans-Light.woff2") format("woff2"), url("../fonts/WorkSans-Light.woff") format("woff"); } + @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; src: url("../fonts/WorkSans-Regular.woff2") format("woff2"), url("../fonts/WorkSans-Regular.woff") format("woff"); } + @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 500; src: url("../fonts/WorkSans-Medium.woff2") format("woff2"), url("../fonts/WorkSans-Medium.woff") format("woff"); } + @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 600; src: url("../fonts/WorkSans-Bold.woff2") format("woff2"), url("../fonts/WorkSans-Bold.woff") format("woff"); } + body { - background: #fff; - color: #777; + background-color: #ffffff; /* var(--MAIN-BG-color) */ + color: #777777; /* var(--MAIN-TEXT-color) */ } + body #chapter h1 { font-size: 3.5rem; } @@ -66,82 +56,81 @@ body #chapter h1 { font-size: 2rem; } } -a { - color: #00bdf3; + +a, +#toc-menu { + color: #00bdf3; /* var(--MAIN-LINK-color) */ } -a:hover { - color: #0082a7; + +a:hover, +#toc-menu:hover { + color: #0082a7; /* var(--MAIN-LINK-HOVER-color) */ } + pre { position: relative; } -.bg { - background: #fff; - border: 1px solid #eaeaea; -} -b, strong, label, th { + +b, +strong, +label, +th { font-weight: 600; } -.default-animation, #header #logo-svg, #header #logo-svg path, #sidebar, #sidebar ul, #body, #body .padding, #body .nav { + +.default-animation, +#sidebar, +#sidebar ul, +#body, +#body .padding, +#body .nav { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } -fieldset { - border: 1px solid #ddd; -} -textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select[multiple=multiple] { - background-color: white; - border: 1px solid #ddd; - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); -} -textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, select[multiple=multiple]:hover { - border-color: #c4c4c4; -} + #header-wrapper { - background: #8451a1; - color: #fff; + background-color: #8451a1; /* var(--MENU-HEADER-BG-color) */ + color: #ffffff; /* var(--MENU-SEARCH-color) */ text-align: center; - border-bottom: 4px solid #9c6fb6; + border-bottom: 4px solid #9c6fb6; /* var(--MENU-HEADER-BORDER-color) */ padding: 1rem; position: relative; } + #header a { display: inline-block; } -#header #logo-svg { - width: 8rem; - height: 2rem; -} -#header #logo-svg path { - fill: #fff; -} + .searchbox { - margin-top: 1rem; - position: relative; - border: 1px solid #915eae; - background: #764890; + border: 1px solid #915eae; /* var(--MENU-SEARCH-BOX-color) */ border-radius: 4px; + background-color: #764890; /* var(--MENU-SEARCH-BG-color) */ + position: relative; + margin-top: 1rem; } + .searchbox label { - color: rgba(255, 255, 255, 0.8); + color: rgba( 255, 255, 255, .8 ); position: absolute; left: 10px; top: 3px; } + .searchbox span { - color: rgba(255, 255, 255, 0.6); + color: rgba( 255, 255, 255, .6 ); position: absolute; right: 10px; top: 3px; cursor: pointer; } + .searchbox span:hover { - color: rgba(255, 255, 255, 0.9); + color: rgba( 255, 255, 255, .9 ); } + .searchbox input { display: inline-block; - color: #fff; width: 100%; height: 30px; background: transparent; @@ -150,18 +139,15 @@ textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[typ margin: 0; font-weight: 300; } -.searchbox input::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.6); -} -.searchbox input::-moz-placeholder { - color: rgba(255, 255, 255, 0.6); -} -.searchbox input:-moz-placeholder { - color: rgba(255, 255, 255, 0.6); -} + .searchbox input:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.6); + color: rgba( 255, 255, 255, .4 ); } + +.searchbox input::placeholder { + color: rgba( 255, 255, 255, .4 ); +} + #sidebar-toggle-span { display: none; } @@ -170,146 +156,196 @@ textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[typ display: inline; } } + #sidebar { - background-color: #322A38; + background-color: #322A38; /* var(--MENU-SECTIONS-BG-color) */ + bottom: 0; + font-size: 15.25px; + left: 0; + line-height: 1.574; position: fixed; top: 0; width: 300px; - bottom: 0; - left: 0; - font-size: 15.25px; - line-height: 1.574; } + #sidebar a { - color: #ccc; + color: #cccccc; /* var(--MENU-SECTIONS-LINK-color) */ } + #sidebar a:hover { - color: #e6e6e6; -} -#sidebar a.subtitle { - color: rgba(204, 204, 204, 0.6); + color: #e6e6e6; /* var(--MENU-SECTIONS-LINK-HOVER-color) */ } + #sidebar hr { - border-bottom: 1px solid #2a232f; + border-bottom: 1px solid #2a232f; /* var(--MENU-SECTION-HR-color) */ } + #sidebar a.padding { padding: 0 1rem; } + #sidebar ul { list-style: none; padding: 0; margin: 0; } -#sidebar ul.searched a { - color: #999999; -} -#sidebar ul.searched .search-match a { - color: #e6e6e6; -} -#sidebar ul.searched .search-match a:hover { - color: white; -} + #sidebar ul.topics { margin: 0 1rem; } + #sidebar ul.topics.searched ul { display: block; } + #sidebar ul.topics ul { display: none; } + #sidebar ul.topics > li > ul > li:last-child { padding-bottom: 1rem; } + #sidebar ul.topics ul ul { padding-bottom: 0; } + #sidebar ul.topics li.parent > ul, #sidebar ul.topics li.active > ul, #sidebar ul.topics li.alwaysopen > ul { display: block; } + #sidebar ul.topics > li > a { - line-height: 2rem; font-size: 1.1rem; + line-height: 2rem; } + #sidebar ul.topics > li > a b { - opacity: 0.5; font-weight: 400; + opacity: 0.5; } + #sidebar ul.topics > li > a .fa { margin-top: 9px; } + #sidebar ul.topics > li.parent { - background: #251f29; + background-color: #251f29; /* var(--MENU-SECTIONS-ACTIVE-BG-color) */ margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; } + #sidebar ul li.active > a { - background: #fff; - color: #777 !important; + background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */ + color: #777 !important; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */ margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; } + #sidebar ul li { padding: 0; } + #sidebar ul li.visited + span { margin-right: 16px; } + #sidebar ul li a { display: block; padding: 2px 0; } + #sidebar ul li a span { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + #sidebar ul li > a { padding: 4px 0; } -#sidebar ul li.visited > a .read-icon { - color: #9c6fb6; - display: inline; -} + #sidebar ul li li { padding-left: 1rem; } -#main { - background: #f7f7f7; - margin: 0 0 1.563rem 0; + +#sidebar ul.topics > li > a .read-icon { + margin-top: 9px; } + +#sidebar ul { + list-style: none; + margin: 0; + padding: 0; +} + +#sidebar #shortcuts li { + list-style: none; + padding: 2px 0; +} + +#sidebar ul li .read-icon { + display: none; + float: right; + font-size: 13px; + margin: 4px 0 0 0; + min-width: 16px; + text-align: right; +} + +#sidebar ul li.visited > a .read-icon { + color: #00bdf3; /* var(--MENU-VISITED-color) */ + display: inline; +} + +#sidebar .nav-title { + color: #e6e6e6; /* var(--MENU-SECTIONS-LINK-HOVER-color) */ + font-size: 2rem; + font-weight: 200; + letter-spacing: -1px; + line-height: 110% !important; + margin: 1rem 0 1rem 0; + padding-left: 1rem; + text-rendering: optimizeLegibility; + text-transform: uppercase; +} + #body { - position: relative; margin-left: 300px; min-height: 100%; + position: relative; } -#body img, #body .video-container { - margin: 1.5rem auto; + +#body img, +#body .video-container { display: block; + margin: 1.5rem auto; text-align: center; } -#body img.border, #body .video-container.border { + +#body img.border, +#body .video-container.border { border: 2px solid #e6e6e6 !important; padding: 2px; } -#body img.shadow, #body .video-container.shadow { + +#body img.shadow, +#body .video-container.shadow { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } + #body img.inline { display: inline !important; margin: 0 !important; vertical-align: bottom; } -#body .bordered { - border: 1px solid #ccc; -} + #body .padding { padding: 3rem 6rem; } @@ -324,55 +360,61 @@ textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[typ padding: 5px 1rem; } } + #body h1 + hr { - margin-top: -1rem; margin-bottom: 2rem; + margin-top: -1rem; } + @media only all and (max-width: 59.938em) { #body #navigation { - position: static; - margin-right: 0 !important; - width: 100%; display: table; + margin-right: 0 !important; + position: static; + width: 100%; } } + #body .nav { - position: fixed; - top: 0; bottom: 0; - width: 4rem; - font-size: 50px; - height: 100%; cursor: pointer; display: table; + font-size: 50px; + height: 100%; + position: fixed; text-align: center; + top: 0; + width: 4rem; } #body .nav > i { display: table-cell; - vertical-align: middle; text-align: center; + vertical-align: middle; } @media only all and (max-width: 59.938em) { #body .nav { display: table-cell; - position: static; - top: auto; - width: 50%; - text-align: center; height: 100px; line-height: 100px; padding-top: 0; + position: static; + text-align: center; + top: auto; + width: 50%; } #body .nav > i { display: inline-block; } } + #body .nav:hover { - background: #F6F6F6; + background-color: rgba( 134, 134, 134, .066 ); } + #body .nav.nav-pref { left: 0; } + #body .nav.nav-next { margin-right: 0px; right: 0; @@ -381,81 +423,95 @@ textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[typ /* we limit width if we have large screens */ @media screen and ( min-width: 1300px ){ /* #sidebar/width + ./max-width */ #body #body-inner { - max-width: 1000px; margin: auto; + max-width: 1000px; } } #chapter { - display: flex; align-items: center; - justify-content: center; + display: flex; height: 100%; + justify-content: center; padding: 2rem 0; } + #chapter #body-inner { max-width: 80%; } + #chapter #body-inner h3:first-child { font-weight: 200; text-align: center; } + #chapter h1 { + border-bottom: 4px solid rgba( 134, 134, 134, .125 ); font-size: 5rem; - border-bottom: 4px solid #F0F2F4; } + #chapter p { - text-align: justify; font-size: 1.2rem; + text-align: justify; } + #footer { - padding: 3rem 1rem; - color: #b3b3b3; + color: #cccccc; /* var(--MENU-SECTIONS-LINK-color) */ font-size: 13px; + padding: 3rem 1rem; text-align: center; } + #footer p { margin: 0; } + body { - color: #323232 !important; font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; + font-size: 16.25px !important; font-weight: 300; line-height: 1.574; - font-size: 16.25px !important; } + h2, h3, h4, h5, h6 { + color: #5e5e5e; /* var(--MAIN-TITLES-TEXT-color) */ font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; - text-rendering: optimizeLegibility; - color: #5e5e5e; letter-spacing: -1px; + text-rendering: optimizeLegibility; } + h1 { font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight: 200; text-align: center; text-transform: uppercase; - color: #222; } + blockquote { - border-left: 10px solid rgba(0, 8, 16, 0.2); + border-left: 10px solid rgba( 134, 134, 134, .4 ); } + blockquote p { - font-size: 1.1rem; - color: #56585d; + font-size: 105%; + font-style: italic; + opacity: .75; + text-align: justify; } + blockquote cite { display: block; + font-weight: bold; + opacity: .5; + padding-top: .5em; text-align: right; - color: #222; - font-size: 1.2rem; } + div.notices { - border-color: #505050; background-color: #eaeaea; - border-top-width: 2rem; + border-color: rgba( 80, 80, 80, .8 ); border-top-style: solid; - color: #505050; + border-top-width: 2rem; + color: #323232; -webkit-print-color-adjust: exact; color-adjust: exact; margin: 1.5rem 0; @@ -463,140 +519,162 @@ div.notices { padding-left: 1rem; padding-right: 1rem; } + div.notices > div.label:first-child:before { content: ""; } + div.notices > div.label { - color: #fff; + color: #ffffff; font-weight: 500; margin-bottom: 1rem; margin-top: -1.75rem; } + div.notices > div.label:first-child:before { font-family: "Font Awesome 5 Free"; font-weight: 900; - margin-left: -.35rem; - margin-right: .35rem; } + div.notices.info { - border-color: #3075e5; background-color: #e5f0ff; + border-color: rgba( 48, 117, 229, .8 ); } + div.notices.info > div.label:first-child:before { content: "\f05a"; + margin-left: -.15rem; + margin-right: .35rem; } + div.notices.warning { - border-color: #e03e3e; background-color: #ffe5e5; + border-color: rgba( 224, 62, 62, .8 ); } + div.notices.warning > div.label:first-child:before { content: "\f071"; + margin-left: -.15rem; + margin-right: .35rem; } + div.notices.note { - border-color: #ed9909; background-color: #ffedd5; + border-color: rgba( 237, 153, 9, .8 ); } + div.notices.note > div.label:first-child:before { content: "\f06a"; + margin-left: -.15rem; + margin-right: .35rem; } + div.notices.tip { - border-color: #2ab218; background-color: #e2fce0; + border-color: rgba( 42, 178, 24, .8 ); } + div.notices.tip > div.label:first-child:before { content: "\f0eb"; + margin-left: -.15rem; + margin-right: .35rem; } /* attachments shortcode */ div.attachments { - border-top-width: 2rem; border-top-style: solid; - color: #505050; + border-top-width: 2rem; + color: #323232; -webkit-print-color-adjust: exact; color-adjust: exact; margin: 1.5rem 0; + padding-bottom: .1px; padding-left: 1rem; padding-right: 1rem; - padding-bottom: .1px; } div.attachments > div.label { - color: #fff; + color: #ffffff; font-weight: 500; margin-bottom: 1rem; margin-top: -1.75rem; } div.attachments > div.label:first-child:before { + content: "\f0c6"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: -.35rem; margin-right: .35rem; - content: "\f0c6"; } div.attachments .attachments-files { - padding: 1rem; display: block; font-size: 1rem; - margin-top: -1rem; margin-bottom: 0rem; + margin-top: -1rem; + padding: 1rem; } div.attachments.orange { - border-color: #ed9909; background-color: #ffedd5; + border-color: rgba( 237, 153, 9, .8 ); } div.attachments.green { - border-color: #2ab218; background-color: #e2fce0; + border-color: rgba( 42, 178, 24, .8 ); } div.attachments.red { - border-color: #e03e3e; background-color: #ffe5e5; + border-color: rgba( 224, 62, 62, .8 ); } div.attachments.blue { - border-color: #3075e5; background-color: #e5f0ff; + border-color: rgba( 48, 117, 229, .8 ); } div.attachments.grey { - border-color: #505050; background-color: #eaeaea; + border-color: rgba( 80, 80, 80, .8 ); } div.attachments.neutral { - border-color: transparent; background-color: transparent; + border-color: transparent; } + div.attachments.neutral > div.label { - color: var(--MAIN-TITLES-TEXT-color); + color: #5e5e5e; } /* Children shortcode */ + .children p { font-size: small; - margin-top: 0px; - padding-top: 0px; margin-bottom: 0px; + margin-top: 0px; padding-bottom: 0px; + padding-top: 0px; } + .children-li p { font-size: small; font-style: italic; +} -} -.children-h2 p, .children-h3 p { +.children-h2 p, +.children-h3 p { font-size: small; - margin-top: 0px; - padding-top: 0px; margin-bottom: 0px; + margin-top: 0px; padding-bottom: 0px; + padding-top: 0px; } + #body-inner .children h2, #body-inner .children h3, #body-inner .children h4, @@ -616,37 +694,44 @@ div.attachments.neutral > div.label { padding-inline-start: 0; } -code, kbd, pre, samp { +code, +kbd, +pre, +samp { font-family: "Consolas", menlo, monospace; font-size: 92%; vertical-align: baseline; } + code { - background-color: #FFFAE9; - border: 1px solid #F8E8C8; + background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */ + border: 1px solid #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */ border-radius: 2px; - color: #5E5E5E; + color: #5e5e5e; /* var(--CODE-INLINE-color) */ -webkit-print-color-adjust: economy; color-adjust: economy; padding-left: 2px; padding-right: 2px; white-space: nowrap; } + code.copy-to-clipboard-inline { border-bottom-right-radius: 0; border-top-right-radius: 0; border-right-width: 0; } + pre { - background-color: #272822; - border: 0; + background-color: #272822; /* var(--CODE-BLOCK-BG-color) */ + border: 1px solid #272822; /* var(--CODE-BLOCK-BORDER-color) */ border-radius: 2px; - color: #f8f8f2; + color: #f8f8f2; /* var(--CODE-BLOCK-color) */ -webkit-print-color-adjust: economy; color-adjust: economy; line-height: 1.15; padding: 1rem; } + pre code { background-color: inherit; color: inherit; @@ -658,26 +743,15 @@ pre code { padding: 0; white-space: inherit; } + hr { - border-bottom: 4px solid #F0F2F4; -} -.page-title { - margin-top: -25px; - padding: 25px; - float: left; - clear: both; - background: #9c6fb6; - color: #fff; -} -#body a.anchor-link { - color: #ccc; -} -#body a.anchor-link:hover { - color: #9c6fb6; + border-bottom: 4px solid rgba( 134, 134, 134, .125 ); } + #body-inner pre { white-space: pre-wrap; } + #body-inner h1, #body-inner h2, #body-inner h3, @@ -685,53 +759,31 @@ hr { #body-inner h5, #body-inner h6 { /* big titles cause a horizontal scrollbar - fixing this by wrapping text */ - overflow-x: hidden; overflow-wrap: break-word; + overflow-x: hidden; } table { - border: 1px solid #ccc; + border: 1px solid rgba( 134, 134, 134, .333 ); margin-bottom: 1rem; margin-top: 1rem; table-layout: auto; } -th, thead td { - background: #eaeaea; - border: 1px solid #ccc; + +th, +thead td { + background-color: rgba( 134, 134, 134, .166 ); + border: 1px solid rgba( 134, 134, 134, .333 ); -webkit-print-color-adjust: exact; color-adjust: exact; padding: 0.5rem; } + td { - border: 1px solid #ccc; + border: 1px solid rgba( 134, 134, 134, .333 ); padding: 0.5rem; } -.button { - background: #9c6fb6; - color: #fff; - box-shadow: 0 3px 0 #00a5d4; -} -.button:hover { - background: #00a5d4; - box-shadow: 0 3px 0 #008db6; - color: #fff; -} -.button:active { - box-shadow: 0 1px 0 #008db6; -} -.button-secondary { - background: #F8B450; - color: #fff; - box-shadow: 0 3px 0 #f7a733; -} -.button-secondary:hover { - background: #f7a733; - box-shadow: 0 3px 0 #f69b15; - color: #fff; -} -.button-secondary:active { - box-shadow: 0 1px 0 #f69b15; -} + .tooltipped { position: relative; } @@ -840,53 +892,83 @@ td { margin-top: -5px; border-right-color: rgba(0, 0, 0, 0.8); } + .highlightable { padding: 1rem 0 1rem; position: relative; } + #sidebar .highlightable { overflow: auto; } + .lightbox-active #body { overflow: visible; } + .lightbox-active #body .padding { overflow: visible; } -#github-contrib i { - vertical-align: middle; -} + .featherlight img { margin: 0 !important; } + #top-bar { - background: #F6F6F6; + background-color: #ffffff; /* var(--MAIN-BG-color) */ border-radius: 2px; - padding: 0 1rem; height: 0; min-height: 3rem; + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 999; } + +#top-bar > div { + background-color: rgba( 134, 134, 134, .066 ); + padding: 0 1rem; + height: 100%; +} + +#top-bar.is-sticky { + box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1); +} + #top-github-link { - position: relative; - z-index: 1; - float: right; display: block; + float: right; + z-index: 1; } + +#top-github-link, +#body #breadcrumbs { + position: relative; + top: 50%; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + #body #breadcrumbs { - height: auto; - margin-bottom: 0; - padding-left: 0; - line-height: 1.4; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - width: 70%; display: inline-block; float: left; + height: auto; + line-height: 1.4; + margin-bottom: 0; + overflow: hidden; + padding-left: 0; + text-overflow: ellipsis; + white-space: nowrap; + width: 70%; } + #body #breadcrumbs span { padding: 0 0.1rem; } + #body #breadcrumbs .links { display: inline; padding: 0 0.1rem; @@ -896,17 +978,21 @@ td { display: inline-block; padding: 0; } + #body #breadcrumbs .links meta { display: none; } + #body #breadcrumbs .links li:last-of-type { cursor: text; } + a[aria-disabled="true"] { color: inherit; pointer-events: none; text-decoration: none; } + @media only all and (max-width: 59.938em) { #sidebar { width: 230px; @@ -917,8 +1003,8 @@ a[aria-disabled="true"] { } @media only all and (max-width: 47.938em) { #sidebar { - width: 230px; left: -230px; + width: 230px; } #body { margin-left: 0; @@ -935,93 +1021,78 @@ a[aria-disabled="true"] { overflow: hidden; } .sidebar-hidden #overlay { - position: absolute; + background-color: rgba(255, 255, 255, 0.5); + bottom: 0; + cursor: pointer; left: 0; + position: absolute; right: 0; top: 0; - bottom: 0; z-index: 10; - background: rgba(255, 255, 255, 0.5); - cursor: pointer; } } + .copy-to-clipboard { - background-color: #FFFAE9; - background-image: url(../images/clippy.svg); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: 14px 16px; - border: 1px solid #F8E8C8; + background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */ + border: 1px solid #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */ border-radius: 0 2px 2px 0; - color: #5E5E5E; + color: #5e5e5e; /* var(--CODE-INLINE-color) */ cursor: pointer; font-family: "Consolas", menlo, monospace; font-size: 92%; padding-left: 22px; } -.copy-to-clipboard:hover { - background-color: #FCEBB4; - border-color: #B19F7A; + +.copy-to-clipboard:before { + content: "\f0c5"; + font-family: "Font Awesome 5 Free"; + font-size: 92%; + font-weight: 500; + margin-left: -22px; } + +.copy-to-clipboard-inline + .copy-to-clipboard:before { + padding-left: 5px; + padding-right: 5px; +} + +.copy-to-clipboard:hover { + background-color: #5e5e5e; /* var(--CODE-INLINE-color) */ + color: #fffae9; /* var(--CODE-INLINE-BG-color) */ +} + +/* using our MAIN-TEXT and MAIN-BG colors here hopefully asserts for enough contrast */ pre .copy-to-clipboard { - background-color: rgba( 204, 204, 204, .666 ); - border-color: #000; + background-color: #ffffff; /* var(--MAIN-BG-color) */ + border-color: #272822; /* var(--MAIN-TEXT-color) */ border-radius: 2px; - padding: 10.5px 12.5px; + color: #777777; /* var(--MAIN-TEXT-color) */ + font-size: 120%; + opacity: .5; + padding: 5px 3px 5px 25px; position: absolute; right: 4px; top: 4px; } + pre .copy-to-clipboard:hover { - border-color: #505050; - background-color: rgba( 236, 236, 236, .9 ); -} - -#sidebar ul.topics > li > a .read-icon { - margin-top: 9px; -} - -#sidebar ul { - list-style: none; - padding: 0; - margin: 0; -} - -#sidebar #shortcuts li { - padding: 2px 0; - list-style: none; -} - -#sidebar ul li .read-icon { - display: none; - float: right; - font-size: 13px; - min-width: 16px; - margin: 4px 0 0 0; - text-align: right; -} -#sidebar ul li.visited > a .read-icon { - color: #00bdf3; - display: inline; -} - -#sidebar .nav-title { - color: white ; - font-size: 2rem; - font-weight: 200; - letter-spacing: -1px; - line-height: 110% !important; - margin: 1rem 0 1rem 0; - padding-left: 1rem; - text-rendering: optimizeLegibility; - text-transform: uppercase; + background-color: #777777; /* var(--MAIN-TEXT-color) */ + color: #ffffff; /* var(--MAIN-BG-color) */ + opacity: .5; } #homelinks { - background-color: #9c6fb6; - color: #fff; - padding: 7px 0; - border-bottom: 4px solid #9c6fb6; + background-color: #9c6fb6; /* var(--MENU-HEADER-BORDER-color) */ + border-bottom: 4px solid #9c6fb6; /* var(--MENU-HEADER-BORDER-color) */ + padding: 7px 0; +} + +#homelinks a { + color: #cccccc /* var(--MENU-HOME-LINK-color) */ +} + +#homelinks a:hover { + color: #e6e6e6 /* var(--MENU-HOME-LINK-HOVER-color) */; } option { @@ -1085,11 +1156,11 @@ option { /* remove inline height from generated diagram */ height: initial !important; } + .mermaid > svg:hover { border-color: #ccc; } - .include.hide-first-heading h1:first-of-type, .include.hide-first-heading h2:first-of-type, .include.hide-first-heading h3:first-of-type, @@ -1120,9 +1191,9 @@ option { /* Table of contents */ .progress ul { - list-style: none; - margin: 0; - padding: 0 15px; + list-style: none; + margin: 0; + padding: 0 15px; } #TableOfContents { @@ -1133,53 +1204,58 @@ option { } #TableOfContents > ul > li > a { - font-weight: 500; + font-weight: 500; } -#body a.highlight, #body a.highlight:hover, #body a.highlight:focus { +#body a.highlight, +#body a.highlight:hover, +#body a.highlight:focus { + outline-style: none; text-decoration: none; - outline: none; - outline: 0; } + #body a.highlight { - line-height: 1.1; display: inline-block; + line-height: 1.1; } + #body a.highlight:after { - display: block; + background-color: #0082a7; /*#CE3B2F*/ content: ""; + display: block; height: 1px; width: 0%; - background-color: #0082a7; /*#CE3B2F*/ -webkit-transition: width 0.5s ease; -moz-transition: width 0.5s ease; -ms-transition: width 0.5s ease; transition: width 0.5s ease; } -#body a.highlight:hover:after, #body a.highlight:focus:after { + +#body a.highlight:hover:after, +#body a.highlight:focus:after { width: 100%; } .progress { - box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1); - position:absolute; background-color: rgba(246, 246, 246, 0.97); - width: auto; border: thin solid #ECECEC; + box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1); display:none; - z-index:200; + position:absolute; + width: auto; + z-index: 200; } #toc-menu { border-right: thin solid #DAD8D8 !important; - padding-right: 1rem !important; margin-right: 0.5rem !important; + padding-right: 1rem !important; } #sidebar-toggle-span { border-right: thin solid #DAD8D8 !important; - padding-right: 0.5rem !important; margin-right: 1rem !important; + padding-right: 0.5rem !important; } .btn { @@ -1236,7 +1312,7 @@ option { /* anchors */ .anchor { - color: #00bdf3; + color: #00bdf3; /* var(--MAIN-ANCHOR-color) */ cursor: pointer; font-size: .5em; margin-left: .66em; @@ -1245,13 +1321,22 @@ option { visibility: hidden; } -h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, h5:hover .anchor, h6:hover .anchor { +h2:hover .anchor, +h3:hover .anchor, +h4:hover .anchor, +h5:hover .anchor, +h6:hover .anchor { visibility:visible; } /* Redfines headers style */ -h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { +h1 a, +h2 a, +h3 a, +h4 a, +h5 a, +h6 a { font-weight: inherit; } @@ -1305,18 +1390,18 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { .select-style { border: 0; - width: 150px; border-radius: 0px; - overflow: hidden; display: inline-flex; + overflow: hidden; + width: 150px; } .select-style svg { fill: #ccc; - width: 14px; height: 14px; - pointer-events: none; margin: auto; + pointer-events: none; + width: 14px; } .select-style svg:hover { @@ -1324,16 +1409,16 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { } .select-style select { - padding: 0; - width: 130%; + -webkit-appearance: none; border: none; box-shadow: none; background: transparent; background-image: none; - -webkit-appearance: none; margin: auto; margin-left: 0px; margin-right: -20px; + padding: 0; + width: 130%; } .select-style select:focus { @@ -1349,14 +1434,3 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { display: none; } } - -#top-bar { - position: -webkit-sticky; - position: sticky; - top: 0; - z-index: 999; -} - -#top-bar.is-sticky { - box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1); -} diff --git a/static/css/variant.css b/static/css/variant.css index 1426a50c32..76ba83705a 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -1,57 +1,32 @@ body { - color: var(--MAIN-TEXT-color) !important; + background-color: var(--MAIN-BG-color, #ffffff); + color: var(--MAIN-TEXT-color); } -h2, h3, h4, h5, h6 { - color: var(--MAIN-TITLES-TEXT-color) !important; -} - -a { +a, +#toc-menu { color: var(--MAIN-LINK-color); } -pre { - background-color: var(--MAIN-CODE-BG-color); - color: var(--MAIN-CODE-color); -} - -.anchor { - color: var(--MAIN-ANCHOR-color); -} - -a:hover { +a:hover, +#toc-menu:hover, +#body a.highlight:after { color: var(--MAIN-LINK-HOVER-color); } -#sidebar ul li.visited > a .read-icon { - color: var(--MENU-VISITED-color); -} - -#body a.highlight:after { - background-color: var(--MAIN-LINK-HOVER-color); -} - -#sidebar { - background-color: var(--MENU-SECTIONS-BG-color); -} - -#sidebar #header-wrapper { +#header-wrapper { background-color: var(--MENU-HEADER-BG-color); - color: var(--MENU-SEARCH-BOX-color); + color: var(--MENU-SEARCH-color, #ffffff); border-color: var(--MENU-HEADER-BORDER-color); } -#sidebar .searchbox { +.searchbox { border-color: var(--MENU-SEARCH-BOX-color); background-color: var(--MENU-SEARCH-BG-color); } -#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { - background-color: var(--MENU-SECTIONS-ACTIVE-BG-color); -} - -#sidebar .searchbox * { - color: var(--MENU-SEARCH-BOX-ICONS-color); +#sidebar { + background-color: var(--MENU-SECTIONS-BG-color); } #sidebar a { @@ -62,25 +37,97 @@ a:hover { color: var(--MENU-SECTIONS-LINK-HOVER-color); } +#sidebar hr { + border-color: var(--MENU-SECTION-HR-color); +} + +#sidebar ul.topics > li.parent, +#sidebar ul.topics > li.active { + background-color: var(--MENU-SECTIONS-ACTIVE-BG-color); +} + #sidebar ul li.active > a { background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color); color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important; } -#sidebar hr { - border-color: var(--MENU-SECTION-HR-color); +#sidebar ul li.visited > a .read-icon { + color: var(--MENU-VISITED-color); } -#body .tags a.tag-link { - background-color: var(--MENU-HEADER-BG-color); +#sidebar .nav-title { + color: var(--MENU-SECTIONS-LINK-HOVER-color); } -#body .tags a.tag-link:before { - border-right-color: var(--MENU-HEADER-BG-color); +#footer { + color: var(--MENU-SECTIONS-LINK-color); +} + +h2, h3, h4, h5, h6 { + color: var(--MAIN-TITLES-TEXT-color); +} + +div.notices > div.label { + color: var(--MAIN-BG-color, #ffffff); +} + +div.attachments > div.label { + color: var(--MAIN-BG-color, #ffffff); +} + +div.attachments.neutral { + color: var(--MAIN-TEXT-color); +} + +div.attachments.neutral > div.label { + color: var(--MAIN-TITLES-TEXT-color); +} + +code { + background-color: var(--CODE-INLINE-BG-color, #fff7dd); + border-color: var(--CODE-INLINE-BORDER-color, #fbf0cb); + color: var(--CODE-INLINE-color, #5e5e5e); +} + +pre { + background-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color)); + border-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color)); + color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color)); +} + +div.featherlight .featherlight-content{ + background-color: var(--MAIN-BG-color, #ffffff); +} + +#top-bar { + background-color: var(--MAIN-BG-color, #ffffff); +} + +.copy-to-clipboard { + background-color: var(--CODE-INLINE-BG-color, #fff7dd); + border-color: var(--CODE-INLINE-BORDER-color, #fbf0cb); + color: var(--CODE-INLINE-color, #5e5e5e); +} + +.copy-to-clipboard:hover { + background-color: var(--CODE-INLINE-color, #5e5e5e); + color: var(--CODE-INLINE-BG-color, #fff7dd); +} + +/* using our MAIN-TEXT and MAIN-BG colors here hopefully asserts for enough contrast */ +pre .copy-to-clipboard { + background-color: var(--MAIN-BG-color, #ffffff); + border-color: var(--MAIN-TEXT-color); + color: var(--MAIN-TEXT-color); +} + +pre .copy-to-clipboard:hover { + background-color: var(--MAIN-TEXT-color); + color: var(--MAIN-BG-color, #ffffff); } #homelinks { - background-color: var(--MENU-HEADER-BG-color); + background-color: var(--MENU-HEADER-BORDER-color); border-bottom-color: var(--MENU-HEADER-BORDER-color); } @@ -92,6 +139,19 @@ a:hover { color: var(--MENU-HOME-LINK-HOVER-color); } -#sidebar .nav-title { - color: var(--MENU-SECTIONS-LINK-HOVER-color) !important; +.anchor { + color: var(--MAIN-ANCHOR-color); +} + +#body .tags a.tag-link { + background-color: var(--MENU-HEADER-BG-color); + color: var(--MAIN-BG-color, #ffffff); +} + +#body .tags a.tag-link:before { + border-right-color: var(--MENU-HEADER-BG-color); +} + +#body .tags a.tag-link:after { + background-color: var(--MAIN-BG-color, #ffffff); } diff --git a/static/images/clippy.svg b/static/images/clippy.svg deleted file mode 100644 index f4551735e1..0000000000 --- a/static/images/clippy.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file