From c4fb359fb08e97d55f8e5b50563ed40967eb2bbc Mon Sep 17 00:00:00 2001 From: JulioPDX Date: Fri, 22 Dec 2023 08:13:10 -0800 Subject: [PATCH] Doc: CSS updates and mike pinning (#3441) --- .../arista/avd/docs/requirements.txt | 2 +- .../avd/docs/stylesheets/extra.material.css | 318 ++++++++---------- 2 files changed, 149 insertions(+), 171 deletions(-) diff --git a/ansible_collections/arista/avd/docs/requirements.txt b/ansible_collections/arista/avd/docs/requirements.txt index 2c274c8d46d..28737438922 100644 --- a/ansible_collections/arista/avd/docs/requirements.txt +++ b/ansible_collections/arista/avd/docs/requirements.txt @@ -3,7 +3,7 @@ mkdocs-material<10 mkdocs-material-extensions pymdown-extensions mdx_truly_sane_lists -mike +mike==1.1.2 mkdocs-git-revision-date-localized-plugin mkdocs-git-revision-date-plugin mkdocs-exclude diff --git a/ansible_collections/arista/avd/docs/stylesheets/extra.material.css b/ansible_collections/arista/avd/docs/stylesheets/extra.material.css index a807b95cc30..ee4da247ca0 100644 --- a/ansible_collections/arista/avd/docs/stylesheets/extra.material.css +++ b/ansible_collections/arista/avd/docs/stylesheets/extra.material.css @@ -1,185 +1,164 @@ [data-md-color-scheme="slate"] { - --md-hue: 210; + --md-hue: 210; } - :root { - /* Color schema based on Arista Color Schema */ - - /* Primary color shades */ - --md-primary-fg-color: #27569B; - --md-primary-fg-color--light: #FFFFFF; - --md-primary-fg-color--dark: #27569B; - --md-primary-bg-color: #FFFFFF; - --md-primary-bg-color--light: #FFFFFF; - - /* Accent color shades */ - --md-accent-fg-color: #27569B; - --md-accent-bg-color: #27569B; - --md-accent-bg-color--light: #27569B; - - /* Link color */ - --md-typeset-a-color: #27569B; - --md-typeset-a-color-fg: #FFFFFF; - --md-typeset-a-color-bg: #27569B; - - /* Code block color shades */ - --md-code-bg-color: #E6E6E6; - --md-code-border-color: #0000004f; - --block-code-bg-color: #e4e4e4; - /* --md-code-fg-color: ...; */ - - /* font-size: 1rem; */ - /* min-height: 100%; - position: relative; - width: 100%; */ - font-feature-settings: "kern","liga"; - font-family: var(--md-text-font-family,_),-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; - -webkit-font-smoothing: antialiased; - + /* Color schema based on Arista Color Schema */ + /* Primary color shades */ + --md-primary-fg-color: #27569B; + --md-primary-fg-color--light: #FFFFFF; + --md-primary-fg-color--dark: #27569B; + --md-primary-bg-color: #FFFFFF; + --md-primary-bg-color--light: #FFFFFF; + /* Accent color shades */ + --md-accent-fg-color: #27569B; + --md-accent-bg-color: #27569B; + --md-accent-bg-color--light: #27569B; + /* Link color */ + --md-typeset-a-color: #27569B; + --md-typeset-a-color-fg: #FFFFFF; + --md-typeset-a-color-bg: #27569B; + /* Code block color shades-org */ + --md-code-bg-color: #E6E6E6; + --md-code-border-color: #0000004f; + --block-code-bg-color: #E6E6E6; + font-feature-settings: "kern","liga"; + font-family: var(--md-text-font-family,_),-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; + -webkit-font-smoothing: antialiased; } - [data-md-color-scheme="slate"] { - - /* Link color */ - --md-typeset-a-color: #75aaf8; - --md-typeset-a-color-fg: #FFFFFF; - --md-typeset-a-color-bg: #27569B; - - /* Code block color shades */ - /* --md-code-bg-color: #E6E6E6; */ - --md-code-border-color: #aec6db4f; - /* --block-code-bg-color: #e4e4e4; */ + /* Primary color shades */ + --md-primary-fg-color: #27569B; + --md-primary-fg-color--light: #FFFFFF; + --md-primary-fg-color--dark: #27569B; + --md-primary-bg-color: #FFFFFF; + --md-primary-bg-color--light: #FFFFFF; + --md-default-bg-color: #2e363e; + /* Accent color shades */ + --md-accent-fg-color: #27569B; + --md-accent-bg-color: #27569B; + --md-accent-bg-color--light: #27569B; + /* Link color */ + --md-typeset-a-color: #4473a9; + --md-typeset-a-color-fg: #FFFFFF; + --md-typeset-a-color-bg: #27569B; } - [data-md-color-scheme="default"] { - /* Primary color shades */ - --md-primary-fg-color: #27569B; - --md-primary-fg-color--light: #FFFFFF; - --md-primary-fg-color--dark: #27569B; - --md-primary-bg-color: #FFFFFF; - --md-primary-bg-color--light: #FFFFFF; - - /* Accent color shades */ - --md-accent-fg-color: #27569B; - --md-accent-bg-color: #27569B; - --md-accent-bg-color--light: #27569B; - - /* Link color */ - --md-typeset-a-color: #27569B; - --md-typeset-a-color-fg: #FFFFFF; - --md-typeset-a-color-bg: #27569B; - - /* Code block color shades */ - --md-code-bg-color: #E6E6E6; - --md-code-border-color: #0000004f; - --block-code-bg-color: #e4e4e4; + /* Primary color shades */ + --md-primary-fg-color: #27569B; + --md-primary-fg-color--light: #FFFFFF; + --md-primary-fg-color--dark: #27569B; + --md-primary-bg-color: #FFFFFF; + --md-primary-bg-color--light: #FFFFFF; + /* Accent color shades */ + --md-accent-fg-color: #27569B; + --md-accent-bg-color: #27569B; + --md-accent-bg-color--light: #27569B; + /* Link color */ + --md-typeset-a-color: #4473a9; + --md-typeset-a-color-fg: #FFFFFF; + --md-typeset-a-color-bg: #27569B; + /* Code block color shades */ + --md-code-bg-color: #E6E6E6; + --md-code-border-color: #0000004f; + --block-code-bg-color: #e4e4e4; + letter-spacing: -.01em; + line-height: 3em; } - @media only screen and (min-width: 76.25em) { - .md-main__inner { - max-width: 100%; - } - .md-sidebar--primary { - /* left: 5%; */ - margin-left: 30; - } - .md-sidebar--secondary { - /* right: 5%; */ - margin-left: 0; - margin-right: 30; - -webkit-transform: none; - transform: none; - } + .md-main__inner { + max-width: 100%; + } + .md-sidebar--primary { + margin-left: 30; + } + .md-sidebar--secondary { + margin-left: 0; + margin-right: 30; + -webkit-transform: none; + transform: none; + } } - @media only screen { - .md-typeset a:hover { - background-color: var(--md-typeset-a-color-bg); - color: var(--md-typeset-a-color-fg); - } - .md-footer-nav { - background-color: var(--md-default-bg-color--light); - color: var(--md-accent-fg-color--transparent) - } - .md-footer { - height: 2%; - } - .md-footer-nav__direction { - position: absolute; - right: 0; - left: 0; - margin-top: -1rem; - padding: 0 1rem; - color: var(--md-default-fg-color--light); - font-size: .64rem; - } - .md-footer-nav__title { - font-size: .9rem; - line-height: 10rem; - color: var(--md-default-fg-color--light); - } - - .md-typeset h4 h5 h6 { - font-size: 1.5rem; - margin: 1em 0; - /* font-weight: 700; */ - letter-spacing: -.01em; - line-height: 3em; - } - - .md-typeset table:not([class]) th { - min-width: 5rem; - padding: .6rem .8rem; - color: var(--md-default-fg-color--lighter); - vertical-align: top; - background-color: var(--md-accent-bg-color); - text-align: left; - /* min-width: 100%; */ - /* display: table; */ - } - .md-typeset table:not([class]) td { - /* padding: .9375em 1.25em; */ - border-collapse: collapse; - vertical-align: center; - text-align: left; - border-bottom: 1px solid var(--md-default-fg-color--light); - } - .md-typeset code { - padding: 0 .2941176471em; - font-size: 80%; - word-break: break-word; - background-color: var(--md-code-bg-color); - border-radius: .1rem; - -webkit-box-decoration-break: clone; - box-decoration-break: clone; - } - .highlight code { - background-color: var(--md-code-bg-color); - border: 2px solid var(--md-code-border-color); - } - .md-typeset .admonition, .md-typeset details { - margin: 1.5625em 0; - padding: 0 .6rem; - overflow: hidden; - font-size: .64rem; - page-break-inside: avoid; - border-left: .2rem solid var(--md-accent-bg-color); - border-left-color: var(--md-accent-bg-color); - border-radius: .1rem; - box-shadow: 0 .2rem .5rem rgba(0,0,0,.05),0 0 .05rem rgba(0,0,0,.1); - } - /* .md-typeset .note > .admonition-title, .md-typeset .note > summary { - background-color: var(--md-accent-bg-color); - color: var(--md-default-fg-color--lighter) - } */ + .md-header__inner, .md-footer-meta__inner{ + max-width: 100%; + } + .md-typeset a:hover { + background-color: var(--md-typeset-a-color-bg); + color: var(--md-typeset-a-color-fg); + } + .md-footer-nav { + background-color: var(--md-default-bg-color--light); + color: var(--md-accent-fg-color--transparent) + } + .md-footer { + height: 2%; + } + .md-footer-nav__direction { + position: absolute; + right: 0; + left: 0; + margin-top: -1rem; + padding: 0 1rem; + color: var(--md-default-fg-color--light); + font-size: .64rem; + } + .md-footer-nav__title { + font-size: .9rem; + line-height: 10rem; + color: var(--md-default-fg-color--light); + } + .md-typeset h4 h5 h6 { + font-size: 1.5rem; + margin: 1em 0; + letter-spacing: -.01em; + line-height: 3em; + } + .md-typeset table:not([class]) th { + min-width: 5rem; + padding: .6rem .8rem; + color: var(--md-default-fg-color--lighter); + vertical-align: top; + background-color: var(--md-accent-bg-color); + text-align: left; + } + .md-typeset table:not([class]) td { + border-collapse: collapse; + vertical-align: center; + text-align: left; + border-bottom: 1px solid var(--md-default-fg-color--light); + } + .md-typeset code { + padding: 0 .2941176471em; + font-size: 80%; + word-break: break-word; + background-color: var(--md-code-bg-color); + border-radius: .1rem; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + } + .highlight code { + background-color: var(--md-code-bg-color); + border: 2px solid var(--md-code-border-color); + } + .md-typeset .admonition, .md-typeset details { + margin: 1.5625em 0; + padding: 0 .6rem; + overflow: visible; + font-size: .64rem; + page-break-inside: avoid; + border-left: .2rem solid var(--md-accent-bg-color); + border-left-color: var(--md-accent-bg-color); + border-radius: .1rem; + border-width: thin; + box-shadow: 0 .2rem .5rem rgba(0,0,0,.05),0 0 .05rem rgba(0,0,0,.1); + } } - .md-typeset__table { +.md-typeset__table { min-width: 100%; - } - .md-typeset table:not([class]) { - display: table; - } - +} +.md-typeset table:not([class]) { + display: table; +} .mdx-content__footer { margin-top: 20px; text-align: center; @@ -191,7 +170,6 @@ .mdx-content__footer a:focus, .mdx-content__footer a:hover { transform: scale(1.2); } - .md-typeset table:not([class]) th { min-width: 5rem; padding: .6rem .8rem;