diff --git a/docs/_static/logo_bw.png b/docs/_static/logo_bw.png new file mode 100644 index 0000000000..df1979d3cc Binary files /dev/null and b/docs/_static/logo_bw.png differ diff --git a/docs/overrides/stylesheets/extra.css b/docs/overrides/stylesheets/extra.css index 3e2ef3d330..fab7e4ba13 100644 --- a/docs/overrides/stylesheets/extra.css +++ b/docs/overrides/stylesheets/extra.css @@ -1,52 +1,214 @@ -:root, -[data-md-color-scheme="default"] { - /* --md-primary-fg-color: #cf3f02; - --md-default-fg-color: #443f3f; */ - --boxShadowD: 0px 12px 24px 0px rgba(68, 63, 63, 0.08), - 0px 0px 4px 0px rgba(68, 63, 63, 0.08); -} -body { - margin: 0; - padding: 0; - /* font-size: 16px; */ -} -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: var(--md-heading-font); - font-weight: bold; -} -.md-typeset h1, -.md-typeset h2 { - font-weight: normal; - color: var(--md-default-fg-color); -} -.md-typeset h3, -.md-typeset h4 { - font-weight: bold; - color: var(--md-default-fg-color); -} -.md-button, -.md-typeset .md-button { - font-family: var(--md-heading-font); -} -.md-content .supheading { - font-family: var(--md-heading-font); - text-transform: uppercase; +:root { + --gradient-start: #e58077; + --gradient-mid-1: #e57a77; + --gradient-mid-2: #e46876; + --gradient-mid-3: #e34b75; + --gradient-mid-4: #e12374; + --gradient-mid-5: #e01073; + --gradient-end: #bb1085; + + /* Primary theme colors + --md-primary-fg-color: #e34b75; + --md-primary-fg-color--light: #e57a77; + --md-primary-fg-color--dark: #bb1085; + + /* Accent colors */ + --md-accent-fg-color: #e01073; + --md-accent-fg-color--transparent: rgba(224, 16, 115, 0.1); + + /* Text colors that work well with the palette */ + --md-text-color: #333333; + --md-text-color--light: #666666; +} + +/* Dark mode color adjustments */ +[data-md-color-scheme="slate"] { + --md-primary-fg-color: #e57a77; + --md-primary-fg-color--light: #e58077; + --md-primary-fg-color--dark: #bb1085; + --md-accent-fg-color: #e46876; + --md-accent-fg-color--transparent: rgba(228, 104, 118, 0.1); +} + +/* Header styling with gradient background */ +.md-header { + background: linear-gradient( + 135deg, + var(--gradient-start) 0%, + var(--gradient-mid-1) 16.66%, + var(--gradient-mid-2) 33.33%, + var(--gradient-mid-3) 50%, + var(--gradient-mid-4) 66.66%, + var(--gradient-mid-5) 83.33%, + var(--gradient-end) 100% + ); + box-shadow: 0 2px 8px rgba(187, 16, 133, 0.15); +} + +/* Ensure header text is readable over gradient */ +.md-header__title, +.md-header__button, +.md-header .md-icon { + color: white; +} + +/* Search box styling */ +.md-search__input { + background-color: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.2); + color: white; +} + +.md-search__input::placeholder { + color: rgba(255, 255, 255, 0.7); +} + +/* Navigation tabs */ +.md-tabs { + background: linear-gradient( + 90deg, + var(--gradient-mid-3) 0%, + var(--gradient-mid-4) 50%, + var(--gradient-mid-5) 100% + ); +} + +.md-tabs__link { + color: rgba(255, 255, 255, 0.9); +} + +.md-tabs__link--active, +.md-tabs__link:hover { + color: white; + opacity: 1; +} + +/* Sidebar navigation */ +.md-nav__link--active { + color: var(--md-primary-fg-color); + font-weight: 500; +} + +.md-nav__link:hover { + color: var(--md-accent-fg-color); +} + +/* Code blocks */ +.highlight { + border-left: 4px solid var(--md-accent-fg-color); + background-color: rgba(228, 104, 118, 0.05); +} + +/* Admonitions */ +.md-typeset .admonition.note { + border-color: var(--md-primary-fg-color); +} + +.md-typeset .admonition.note > .admonition-title { + background-color: rgba(227, 75, 117, 0.1); + border-color: var(--md-primary-fg-color); +} + +.md-typeset .admonition.tip { + border-color: var(--gradient-mid-1); +} + +.md-typeset .admonition.tip > .admonition-title { + background-color: rgba(229, 122, 119, 0.1); + border-color: var(--gradient-mid-1); +} + +.md-typeset .admonition.warning { + border-color: var(--gradient-end); +} + +.md-typeset .admonition.warning > .admonition-title { + background-color: rgba(187, 16, 133, 0.1); + border-color: var(--gradient-end); +} + +/* Links */ +.md-content a { + color: var(--md-accent-fg-color); +} + +.md-content a:hover { + color: var(--gradient-end); +} + +/* Table of contents */ +.md-nav--secondary .md-nav__link--active { + color: var(--md-accent-fg-color); + border-left: 2px solid var(--md-accent-fg-color); + padding-left: calc(1rem - 2px); +} + +/* Footer */ +.md-footer { + background-color: var(--gradient-end); +} + +/* Buttons and interactive elements */ +.md-button { + background: linear-gradient(135deg, var(--md-primary-fg-color), var(--md-accent-fg-color)); + border: none; + color: white; + transition: all 0.3s ease; +} + +.md-button:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(187, 16, 133, 0.3); +} + +/* Scrollbar styling */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: rgba(187, 16, 133, 0.1); +} + +::-webkit-scrollbar-thumb { + background: linear-gradient( + 180deg, + var(--md-primary-fg-color), + var(--md-accent-fg-color) + ); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: linear-gradient( + 180deg, + var(--md-accent-fg-color), + var(--gradient-end) + ); +} + +/* Search results highlighting */ +.md-search-result__title { color: var(--md-primary-fg-color); - font-size: 0.75rem; - font-weight: bold; +} + +.md-search-result__teaser mark { + background-color: rgba(224, 16, 115, 0.2); + color: var(--gradient-end); } .md-header__button.md-logo img, .md-header__button.md-logo svg { - height: 2rem; - width: auto; + height: 42px !important; /* Increase from default ~24px */ + width: auto !important; + max-height: none !important; + padding: 0 0 0 16px !important; /* Keep left padding, remove others */ + margin: 0 !important; /* Remove any margin */ } -.md-header { - padding: 0.2rem 0; +/* Also remove padding from the logo button container except left */ +.md-header__button.md-logo { + padding: 0 0 0 8px !important; /* Keep some left padding on container */ + margin: 0 !important; + min-width: auto !important; } diff --git a/mkdocs.yml b/mkdocs.yml index c938ec36a8..009f6a52ee 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -62,30 +62,26 @@ theme: language: en name: material custom_dir: docs/overrides - logo: _static/logo_horizontal.svg - palette: - # Palette toggle for automatic mode - - media: "(prefers-color-scheme)" - toggle: - icon: material/brightness-auto - name: Switch to light mode + logo: _static/logo_bw.png - # Palette toggle for light mode + palette: + # Light mode - media: "(prefers-color-scheme: light)" - primary: blue grey - accent: pink + scheme: default + primary: custom + accent: custom toggle: icon: material/brightness-7 name: Switch to dark mode - # Palette toggle for dark mode + # Dark mode - media: "(prefers-color-scheme: dark)" scheme: slate - primary: grey - accent: pink + primary: custom + accent: custom toggle: icon: material/brightness-4 - name: Switch to system preference + name: Switch to light mode font: text: Roboto