From c030541a58cd12c40271588d6d29bcb05e2fba76 Mon Sep 17 00:00:00 2001 From: Harish Mohan Raj Date: Fri, 13 Sep 2024 14:17:14 +0530 Subject: [PATCH 1/3] Update branding colors --- docs/docs/stylesheets/extra.css | 125 ++++++++++++++++++++++++++++---- 1 file changed, 112 insertions(+), 13 deletions(-) diff --git a/docs/docs/stylesheets/extra.css b/docs/docs/stylesheets/extra.css index 31d697044..08be9936b 100644 --- a/docs/docs/stylesheets/extra.css +++ b/docs/docs/stylesheets/extra.css @@ -3,24 +3,79 @@ all variables https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss */ +:root { + --color-dark-red: #E43F2B; + --color-light-red: #F25C49; + + --color-dark-blue: #2A2C31; + --color-light-blue: #164EFF; + --color-lighter-blue: #64BAFD; + + /* --color-light-blue with 15% opacity */ + --color-light-blue-transparent: #164EFF26; + + --color-dark-yellow: #FBAF21; /* or #FEBE09 */ + --color-light-yellow: #FFF588; + --color-lighter-yellow: #FFFBD0; + + --color-white: #ffffff; + --color-slate-bg: hsla(var(--md-hue), 7%, 18%, 1); + + } + :root { /* Primary color */ - --md-primary-fg-color: #E43F2B; - --md-primary-fg-color--light: #E43F2B; - --md-primary-fg-color--dark: #E43F2B; + --md-primary-fg-color: var(--color-dark-red); + --md-primary-fg-color--light: var(--color-dark-red); + --md-primary-fg-color--dark: var(--color-dark-red); /* Accent color */ - --md-accent-fg-color: #164DFF; - --md-accent-fg-color--transparent: #164DFF1A; + --md-accent-fg-color: var(--color-light-blue); + --md-accent-fg-color--transparent: var(--color-light-blue)1A; /* Text color */ - --md-typeset-color: #ffffff; + --md-typeset-color: var(--color-white); } [data-md-color-scheme="default"] { /* Footer background color */ - --md-footer-bg-color: #F25C49; - --md-footer-bg-color--dark: #E43F2B; + --md-footer-bg-color: var(--color-light-red); + --md-footer-bg-color--dark: var(--color-dark-red); + + .highlight .hll { + background-color: var(--color-light-yellow); + box-shadow: 2px 0 0 0 var(--color-light-blue) inset; + } + + .highlight .bp, .highlight .nb, .highlight .no { + color: var(--color-light-blue); + } + + code.doc-symbol-class { + color: var(--color-light-blue); + background: var(--color-light-blue-transparent); + } + code.doc-symbol-attribute { + color: var(--color-dark-red); + } + + code.doc-symbol-method { + color: var(--color-dark-blue); + } + + .md-typeset .admonition.note, .md-typeset details.note { + border-color: var(--color-light-blue); + } + + .md-typeset .note>.admonition-title:before, .md-typeset .note>summary:before { + background-color: var(--color-light-blue); + + /* background-color: transparent; + background-image: url('/assets/img/logo.svg'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; */ + } } @@ -28,10 +83,43 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/ --md-default-bg-color: hsla(var(--md-hue), 7%, 18%, 1); /* Footer background color */ - --md-footer-bg-color: #F25C49; - --md-footer-bg-color--dark: #E43F2B; + --md-footer-bg-color: var(--color-light-red); + --md-footer-bg-color--dark: var(--color-dark-red); + + --md-typeset-a-color: var(--color-dark-red); + + .highlight .hll { + background-color: var(--color-light-yellow); + box-shadow: 2px 0 0 0 var(--color-light-blue) inset; + } + + .highlight .o, .highlight .ow, .highlight .bp, .highlight .nb, .highlight .no, .highlight .p { + color: var(--color-lighter-blue); + } + + .highlight .hll > .n { + color: var(--color-light-blue); + } + + code.doc-symbol-class { + color: var(--color-lighter-blue); + background: var(--color-light-blue-transparent); + } + code.doc-symbol-attribute { + color: var(--color-light-red); + } + + code.doc-symbol-method { + color: var(--color-lighter-blue); + } - --md-typeset-a-color: #E43F2B; + .md-typeset .admonition.note, .md-typeset details.note { + border-color: var(--color-lighter-blue); + } + + .md-typeset .note>.admonition-title:before, .md-typeset .note>summary:before { + background-color: var(--color-lighter-blue); + } } a.external-link { @@ -63,6 +151,17 @@ a.internal-link::after { padding: 0 .2rem; } -.highlight .hll { - background-color: #FFF587; +.md-typeset .admonition.note:focus-within, .md-typeset details.note:focus-within { + box-shadow: 0 0 0 .2rem var(--color-light-blue-transparent); +} + +.md-typeset .note>.admonition-title, .md-typeset .note>summary { + background-color: var(--color-light-blue-transparent); +} + +.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { + color: var(--color-light-blue); +} +.highlight .nd, .highlight .ni, .highlight .nl, .highlight .nt { + color: var(--color-lighter-blue); } From 782f944d4b8e2e73868fef94c4599d53ae1e717c Mon Sep 17 00:00:00 2001 From: Harish Mohan Raj Date: Fri, 13 Sep 2024 14:34:01 +0530 Subject: [PATCH 2/3] Ignore codespell error for css class name --- docs/docs/stylesheets/extra.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/docs/stylesheets/extra.css b/docs/docs/stylesheets/extra.css index 08be9936b..5ca1b158a 100644 --- a/docs/docs/stylesheets/extra.css +++ b/docs/docs/stylesheets/extra.css @@ -162,6 +162,7 @@ a.internal-link::after { .highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { color: var(--color-light-blue); } -.highlight .nd, .highlight .ni, .highlight .nl, .highlight .nt { + +.highlight .nd, .highlight .ni, .highlight .nl, .highlight .nt { /* codespell:ignore nd */ color: var(--color-lighter-blue); } From d2aac7a5282e79874aad3b97ce96233fb6c931ca Mon Sep 17 00:00:00 2001 From: Harish Mohan Raj Date: Fri, 13 Sep 2024 14:51:15 +0530 Subject: [PATCH 3/3] Polishing --- docs/docs/stylesheets/extra.css | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/docs/docs/stylesheets/extra.css b/docs/docs/stylesheets/extra.css index 5ca1b158a..1e825e213 100644 --- a/docs/docs/stylesheets/extra.css +++ b/docs/docs/stylesheets/extra.css @@ -11,8 +11,8 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/ --color-light-blue: #164EFF; --color-lighter-blue: #64BAFD; - /* --color-light-blue with 15% opacity */ - --color-light-blue-transparent: #164EFF26; + /* --color-lighter-blue with 70% opacity */ + --color-light-blue-transparent: #64BAFDB3; --color-dark-yellow: #FBAF21; /* or #FEBE09 */ --color-light-yellow: #FFF588; @@ -77,6 +77,14 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/ background-position: center; */ } + .md-typeset .admonition.note:focus-within, .md-typeset details.note:focus-within { + box-shadow: 0 0 0 .2rem var(--color-light-blue-transparent); + } + + .md-typeset .note>.admonition-title, .md-typeset .note>summary { + background-color: var(--color-light-blue-transparent); + } + } [data-md-color-scheme=slate] { @@ -120,6 +128,14 @@ https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/ .md-typeset .note>.admonition-title:before, .md-typeset .note>summary:before { background-color: var(--color-lighter-blue); } + + .md-typeset .admonition.note:focus-within, .md-typeset details.note:focus-within { + box-shadow: 0 0 0 .2rem var(--color-light-blue); + } + + .md-typeset .note>.admonition-title, .md-typeset .note>summary { + background-color: var(--color-light-blue); + } } a.external-link { @@ -151,14 +167,6 @@ a.internal-link::after { padding: 0 .2rem; } -.md-typeset .admonition.note:focus-within, .md-typeset details.note:focus-within { - box-shadow: 0 0 0 .2rem var(--color-light-blue-transparent); -} - -.md-typeset .note>.admonition-title, .md-typeset .note>summary { - background-color: var(--color-light-blue-transparent); -} - .highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { color: var(--color-light-blue); }