diff --git a/README.md b/README.md index 777f320..7b41193 100644 --- a/README.md +++ b/README.md @@ -36,12 +36,12 @@ Add `intility-bifrost` to your `mkdocs.yml` plugins: theme: name: material palette: - - scheme: light - primary: teal # Options: teal, purple, pink, yellow + - scheme: default # or 'light' — both map to Bifrost light mode + primary: teal # Options: teal, purple, pink, yellow toggle: icon: material/brightness-7 name: Switch to dark mode - - scheme: dark + - scheme: slate # or 'dark' — both map to Bifrost dark mode primary: teal toggle: icon: material/brightness-4 diff --git a/pyproject.toml b/pyproject.toml index 8115784..89be42d 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -63,7 +63,6 @@ where = ["src"] intility_bifrost_mkdocs = [ "overrides/**/*.html", "overrides/**/*.css", - "overrides/**/*.woff2", "overrides/**/*.js", ] diff --git a/src/intility_bifrost_mkdocs/overrides/assets/fonts/satoshi-variable-italic.woff2 b/src/intility_bifrost_mkdocs/overrides/assets/fonts/satoshi-variable-italic.woff2 deleted file mode 100644 index e7ab3a0..0000000 Binary files a/src/intility_bifrost_mkdocs/overrides/assets/fonts/satoshi-variable-italic.woff2 and /dev/null differ diff --git a/src/intility_bifrost_mkdocs/overrides/assets/fonts/satoshi-variable.woff2 b/src/intility_bifrost_mkdocs/overrides/assets/fonts/satoshi-variable.woff2 deleted file mode 100644 index b00e833..0000000 Binary files a/src/intility_bifrost_mkdocs/overrides/assets/fonts/satoshi-variable.woff2 and /dev/null differ diff --git a/src/intility_bifrost_mkdocs/overrides/assets/stylesheets/bifrost.css b/src/intility_bifrost_mkdocs/overrides/assets/stylesheets/bifrost.css index dbebce0..f83a559 100644 --- a/src/intility_bifrost_mkdocs/overrides/assets/stylesheets/bifrost.css +++ b/src/intility_bifrost_mkdocs/overrides/assets/stylesheets/bifrost.css @@ -1,43 +1,20 @@ -/** - * Bifrost MkDocs Theme Stylesheet - * - * A custom theme implementation using Intility's Bifrost design system. - * This theme extends Material for MkDocs while fully implementing Bifrost design principles. - * - * @see https://bifrost.intility.com - */ - -/* Use cascade layers to ensure our CSS takes precedence */ -@layer material-overrides; - -/* ============================================================================ - 1. IMPORT BIFROST CSS FRAMEWORK (for fonts and utilities) - ============================================================================ */ - -@import url("https://unpkg.com/@intility/bifrost-css@6.7.0/dist/bifrost-all.css"); - -/* ============================================================================ - 2. BIFROST COLOR VARIABLES - ============================================================================ */ - -/* - * Note: All Bifrost color variables (--bfc-*) are defined by the Bifrost CSS - * framework loaded from CDN. They automatically switch between light and dark - * mode based on the .bf-lightmode and .bf-darkmode classes applied to . - * The theme colors change based on .bf-theme-* classes (teal, purple, pink, yellow). - * - * We don't need to redefine them here - just use them directly! - */ - -/* ============================================================================ - 3. MATERIAL THEME VARIABLE MAPPING - ============================================================================ */ +/* Bifrost MkDocs theme overrides. See https://bifrost.intility.com */ +/* Bifrost CSS framework, scoped into the `bifrost` cascade layer. + Unpkg-hosted so version bumps are a one-line change. */ +@layer bifrost; +@import url("https://unpkg.com/@intility/bifrost-css@6.7.0/dist/bifrost-all.css") layer(bifrost); + +/* Bifrost color variables (--bfc-*) come from the framework above and switch + automatically with .bf-lightmode / .bf-darkmode and .bf-theme-* on . */ + +/* Material theme variable mapping */ + +/* Local font-size scale (Bifrost only ships --bf-font-size-m by default). */ :root { - /* Bifrost Font Size Variables - Define if not present from CDN */ --bf-font-size-xs: 12px; --bf-font-size-s: 13px; - --bf-font-size-m: 14px; /* Base size */ + --bf-font-size-m: 14px; --bf-font-size-l: 16px; --bf-font-size-xl: 18px; --bf-font-size-h5: 18px; @@ -45,44 +22,25 @@ --bf-font-size-h3: 24px; --bf-font-size-h2: 29px; --bf-font-size-h1: 35px; - - /* Bifrost success colors */ - --bifrost-success-light: #007a4b; - --bifrost-success-dark: #00f597; - --bifrost-success: var(--bifrost-success-light); /* Default to light */ -} - -/* Override success color for dark mode */ -[data-md-color-scheme="dark"] { - --bifrost-success: var(--bifrost-success-dark); -} - -[data-md-color-scheme="slate"] { - --bifrost-success: var(--bifrost-success-dark); } +/* Point Material's CSS variables at Bifrost tokens so Material's default + blue accent is replaced everywhere it's used internally. */ :root { - /* Background colors */ --md-default-bg-color: var(--bfc-base); --md-default-fg-color: var(--bfc-base-c); - - /* Primary color (header, links) */ --md-primary-fg-color: var(--bfc-theme); --md-primary-bg-color: var(--bfc-base); - - /* Accent color (buttons, highlights) */ --md-accent-fg-color: var(--bfc-theme); --md-accent-bg-color: var(--bfc-theme-fade); - - /* Override Material's default blue for various components */ + --md-typeset-a-color: var(--bfc-theme); --md-typeset-mark-color: var(--bfc-theme-fade); --md-typeset-kbd-color: var(--bfc-base-c); --md-typeset-kbd-accent-color: var(--bfc-theme); --md-typeset-kbd-border-color: var(--bfc-base-dimmed); --md-typeset-table-color: var(--bfc-base-c); - - /* Override Material's internal CSS variables that cause blue colors */ + --md-default-fg-color--accent: var(--bfc-theme); --md-typeset-color: var(--bfc-base-c); --md-typeset-del-color: var(--bfc-alert); @@ -91,49 +49,38 @@ --md-focus-color: var(--bfc-theme); --md-selection-color: var(--bfc-theme-fade); - /* Code blocks */ --md-code-bg-color: var(--bfc-base-2); --md-code-fg-color: var(--bfc-base-c); - /* Links */ - --md-typeset-a-color: var(--bfc-theme); - - /* Borders and dividers */ --md-default-fg-color--light: var(--bfc-base-c-2); --md-default-fg-color--lighter: var(--bfc-base-dimmed); --md-default-fg-color--lightest: var(--bfc-base-dimmed-2); - /* Footer */ --md-footer-bg-color: var(--bfc-base-2); --md-footer-fg-color: var(--bfc-base-c); - /* Shadows */ --md-shadow-z1: var(--bf-shadow); --md-shadow-z2: 0 0 12px var(--bfc-shadow); --md-shadow-z3: 0 0 16px var(--bfc-shadow); } -/* ============================================================================ - 4. BIFROST TYPOGRAPHY - ============================================================================ */ +/* Typography */ body { font-family: "Open Sans", sans-serif; - font-size: var(--bf-font-size-m); /* 14px - Bifrost default */ + font-size: var(--bf-font-size-m); color: var(--bfc-base-c); background-color: var(--bfc-base); line-height: 1.6; } -/* Override Material's default font sizes with higher specificity */ .md-container .md-main .md-content .md-typeset, .md-container .md-typeset, .md-typeset { - font-size: var(--bf-font-size-m); /* 14px */ + font-size: var(--bf-font-size-m); line-height: 1.6; } -/* Headings use Satoshi font */ h1, h2, h3, @@ -147,17 +94,17 @@ h6, .md-typeset h5, .md-typeset h6 { font-family: "Satoshi", sans-serif; - font-weight: 700; /* Bifrost uses 700 for headings */ + font-weight: 700; color: var(--bfc-base-c); margin-top: 1.5em; margin-bottom: 0.5em; } -/* Use higher specificity instead of !important */ +/* Higher-specificity heading selectors used in place of !important. */ .md-container .md-main .md-content .md-typeset h1, .md-content .md-typeset h1, .md-typeset h1 { - font-size: var(--bf-font-size-h2); /* 29px - using h2 size for h1 */ + font-size: var(--bf-font-size-h2); line-height: 1.2; margin-top: 0; } @@ -165,35 +112,35 @@ h6, .md-container .md-main .md-content .md-typeset h2, .md-content .md-typeset h2, .md-typeset h2 { - font-size: var(--bf-font-size-h3); /* 24px - using h3 size for h2 */ + font-size: var(--bf-font-size-h3); line-height: 1.3; } .md-container .md-main .md-content .md-typeset h3, .md-content .md-typeset h3, .md-typeset h3 { - font-size: var(--bf-font-size-h4); /* 20px - using h4 size for h3 */ + font-size: var(--bf-font-size-h4); line-height: 1.4; } .md-container .md-main .md-content .md-typeset h4, .md-content .md-typeset h4, .md-typeset h4 { - font-size: var(--bf-font-size-h5); /* 18px - using h5 size for h4 */ + font-size: var(--bf-font-size-h5); line-height: 1.4; } .md-container .md-main .md-content .md-typeset h5, .md-content .md-typeset h5, .md-typeset h5 { - font-size: var(--bf-font-size-l); /* 16px */ + font-size: var(--bf-font-size-l); line-height: 1.5; } .md-container .md-main .md-content .md-typeset h6, .md-content .md-typeset h6, .md-typeset h6 { - font-size: var(--bf-font-size-m); /* 14px - same as body */ + font-size: var(--bf-font-size-m); line-height: 1.5; } @@ -209,14 +156,12 @@ h6, .md-typeset ul, .md-typeset ol, .md-typeset li { - font-size: var(--bf-font-size-m); /* 14px */ + font-size: var(--bf-font-size-m); line-height: 1.6; color: var(--bfc-base-c); } -/* ============================================================================ - 5. HEADER - ============================================================================ */ +/* Header */ .md-header { background-color: var(--bfc-base-2); @@ -242,9 +187,7 @@ h6, color: var(--bfc-base-c); } -/* ============================================================================ - 6. NAVIGATION TABS - ============================================================================ */ +/* Navigation tabs */ .md-tabs { background-color: var(--bfc-base-2); @@ -269,9 +212,7 @@ h6, outline-offset: 2px; } -/* ============================================================================ - 7. SIDEBAR NAVIGATION - ============================================================================ */ +/* Sidebar navigation */ .md-sidebar { background-color: var(--bfc-base); @@ -290,112 +231,103 @@ h6, } .md-nav { - font-size: var(--bf-font-size-m); /* 14px */ + font-size: var(--bf-font-size-m); color: var(--bfc-base-c); } .md-nav__title { - color: var(--bfc-base-c) !important; + color: var(--bfc-base-c); font-weight: 700; - font-size: var(--bf-font-size-m); /* 14px */ + font-size: var(--bf-font-size-m); } -/* Remove background and shadow from all navigation titles */ .md-nav__title, .md-nav--primary .md-nav__title, .md-nav--secondary .md-nav__title, .md-nav__title[for] { - background: none !important; - background-color: transparent !important; - box-shadow: none !important; - position: relative !important; + background: none; + background-color: transparent; + box-shadow: none; + position: relative; } -/* Remove pseudo-element shadows/fades */ .md-nav__title::before, .md-nav__title::after, .md-nav--secondary .md-nav__title::before, .md-nav--secondary .md-nav__title::after, .md-nav--primary .md-nav__title::before, .md-nav--primary .md-nav__title::after { - display: none !important; - content: none !important; - background: none !important; - box-shadow: none !important; + display: none; + content: none; + background: none; + box-shadow: none; } -/* Remove fade from lifted navigation active links */ .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link { - background: none !important; - background-color: transparent !important; - box-shadow: none !important; + background: none; + background-color: transparent; + box-shadow: none; } -/* Ensure labels in active nav items use default text color */ .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link[for] { - color: var(--bfc-base-c) !important; + color: var(--bfc-base-c); } .md-nav__link { - color: var(--bfc-base-c) !important; - font-size: var(--bf-font-size-m); /* 14px */ + color: var(--bfc-base-c); + font-size: var(--bf-font-size-m); } .md-nav__link--active { - color: var(--bfc-theme) !important; + color: var(--bfc-theme); font-weight: 600; } .md-nav__link:hover, .md-nav__link:focus { - color: var(--bfc-theme) !important; + color: var(--bfc-theme); } -/* Primary navigation (left sidebar) */ .md-nav--primary .md-nav__title { - color: var(--bfc-base-c) !important; + color: var(--bfc-base-c); } .md-nav--primary .md-nav__link { - color: var(--bfc-base-c) !important; - font-size: var(--bf-font-size-m); /* 14px */ + color: var(--bfc-base-c); + font-size: var(--bf-font-size-m); } .md-nav--primary .md-nav__link--active { - color: var(--bfc-theme) !important; + color: var(--bfc-theme); } .md-nav--primary .md-nav__link:hover { - color: var(--bfc-theme) !important; + color: var(--bfc-theme); } -/* Table of Contents (right sidebar) */ .md-nav--secondary .md-nav__link { - color: var(--bfc-base-c) !important; - font-size: var(--bf-font-size-m); /* 14px */ + color: var(--bfc-base-c); + font-size: var(--bf-font-size-m); } .md-nav--secondary .md-nav__link:hover { - color: var(--bfc-theme) !important; + color: var(--bfc-theme); } .md-nav--secondary .md-nav__link--active { - color: var(--bfc-theme) !important; + color: var(--bfc-theme); font-weight: 600; } -/* Navigation items */ .md-nav__item { color: var(--bfc-base-c); } .md-nav__item--active > .md-nav__link { - color: var(--bfc-theme) !important; + color: var(--bfc-theme); } -/* ============================================================================ - 8. MAIN CONTENT - ============================================================================ */ +/* Main content */ .md-content { background-color: var(--bfc-base); @@ -409,7 +341,6 @@ h6, color: var(--bfc-base-c); } -/* Links */ .md-typeset a { color: var(--bfc-theme); text-decoration: none; @@ -421,9 +352,8 @@ h6, color: var(--bfc-theme); } -/* Permalink icons (¶ after headings) */ .md-typeset .headerlink { - color: var(--bfc-base-dimmed) !important; + color: var(--bfc-base-dimmed); } .md-typeset .headerlink:hover, @@ -435,12 +365,10 @@ h6, .md-typeset h4:target .headerlink, .md-typeset h5:target .headerlink, .md-typeset h6:target .headerlink { - color: var(--bfc-theme) !important; + color: var(--bfc-theme); } -/* ============================================================================ - 9. CODE BLOCKS - ============================================================================ */ +/* Code blocks */ .md-typeset pre, .md-typeset code { @@ -450,9 +378,8 @@ h6, .md-typeset code { padding: 0.1em 0.4em; - border-radius: 3px; + border-radius: var(--bf-radius-xs); font-size: 0.9em; - font-family: "Monaco", "Courier New", Consolas, monospace; } .md-typeset pre > code { @@ -468,7 +395,8 @@ h6, color: var(--bfc-base-c); } -/* Code copy button - target all possible selectors */ +/* Code copy button — Material applies styles via JS, so several selector + variants are listed to make sure we catch every rendered form. */ .md-clipboard, button[data-clipboard-text], .md-icon[data-clipboard-text], @@ -498,7 +426,8 @@ button[data-clipboard-text]:active, background-color: var(--bfc-theme-fade); } -/* Universal override for all interactive elements - no blue anywhere */ +/* Blanket no-blue rule for interactive elements — Material's default accent + leaks blue into focus/hover states; force the Bifrost theme color instead. */ button, .md-button, input, @@ -533,7 +462,6 @@ a:active, outline-offset: 2px; } -/* Override blue selection and active states universally */ *:focus, *:active, *:hover.md-button, @@ -542,12 +470,11 @@ a:active, border-color: var(--bfc-theme); } -/* Override browser default focus styles */ *:focus-visible { outline: 2px solid var(--bfc-theme); } -/* Force override Material's JavaScript-applied styles */ +/* Material applies these button styles via JS after page load. */ .highlight button, .codehilite button, pre button, @@ -573,28 +500,23 @@ code button:active { background-color: var(--bfc-theme-fade); } -/* Code copy confirmation message */ .md-clipboard__message { background-color: var(--bfc-base-3); color: var(--bfc-base-c); border: 1px solid var(--bfc-base-dimmed); } -/* Ensure the message text has proper contrast */ .md-clipboard__message::after { background-color: var(--bfc-base-3); color: var(--bfc-base-c); } -/* ============================================================================ - 10. ADMONITIONS - ============================================================================ */ +/* Admonitions */ -/* Base admonition styling with full border */ .md-typeset .admonition, .md-typeset details { border: 1px solid; - border-radius: 8px; + border-radius: var(--bf-radius-s); background-color: var(--bfc-base); color: var(--bfc-base-c); margin: 1.5625em 0; @@ -609,13 +531,13 @@ code button:active { font-weight: 600; font-family: "Satoshi", sans-serif; margin: 0; - padding: 12px 16px 12px 44px; + /* 44px left padding makes room for the absolutely-positioned icon. */ + padding: var(--bfs12) var(--bfs16) var(--bfs12) 44px; border: none; border-radius: 0; position: relative; } -/* Keep Material's default icon but allow coloring */ .md-typeset .admonition-title::before, .md-typeset summary::before { position: absolute; @@ -626,29 +548,22 @@ code button:active { height: 16px; } -/* Admonition content padding */ .md-typeset .admonition > *:not(.admonition-title), .md-typeset details > *:not(summary) { - padding: 0 16px; - margin: 16px 0; + padding: 0 var(--bfs16); + margin: var(--bfs16) 0; } .md-typeset .admonition > *:last-child, .md-typeset details > *:last-child { - margin-bottom: 16px; + margin-bottom: var(--bfs16); } -/* Style the expand/collapse arrow for better contrast */ -.md-typeset summary::after { - color: var(--bfc-base-c); -} - -/* Ensure the arrow icon in collapsible admonitions has proper contrast */ +.md-typeset summary::after, .md-typeset details[open] > summary::after { color: var(--bfc-base-c); } -/* Note - Theme color */ .md-typeset .admonition.note, .md-typeset details.note { border-color: var(--bfc-theme); @@ -667,7 +582,6 @@ code button:active { -webkit-mask-size: contain; } -/* Info - Theme color (same as note) */ .md-typeset .admonition.info, .md-typeset details.info { border-color: var(--bfc-theme); @@ -686,7 +600,6 @@ code button:active { -webkit-mask-size: contain; } -/* Abstract - Chill (purple) */ .md-typeset .admonition.abstract, .md-typeset details.abstract { border-color: var(--bfc-chill); @@ -705,17 +618,16 @@ code button:active { -webkit-mask-size: contain; } -/* Tip - Success (green) */ .md-typeset .admonition.tip, .md-typeset details.tip { - border-color: var(--bifrost-success); + border-color: var(--bfc-success); } .md-container .md-typeset .tip > .admonition-title::before, .md-container .md-typeset .tip > summary::before, .md-typeset .tip > .admonition-title::before, .md-typeset .tip > summary::before { - background-color: var(--bifrost-success); + background-color: var(--bfc-success); mask-image: var(--md-admonition-icon--tip); -webkit-mask-image: var(--md-admonition-icon--tip); mask-repeat: no-repeat; @@ -724,17 +636,16 @@ code button:active { -webkit-mask-size: contain; } -/* Success - Success (green) */ .md-typeset .admonition.success, .md-typeset details.success { - border-color: var(--bifrost-success); + border-color: var(--bfc-success); } .md-container .md-typeset .success > .admonition-title::before, .md-container .md-typeset .success > summary::before, .md-typeset .success > .admonition-title::before, .md-typeset .success > summary::before { - background-color: var(--bifrost-success); + background-color: var(--bfc-success); mask-image: var(--md-admonition-icon--success); -webkit-mask-image: var(--md-admonition-icon--success); mask-repeat: no-repeat; @@ -743,7 +654,6 @@ code button:active { -webkit-mask-size: contain; } -/* Warning/Attention/Caution - Warning (orange) */ .md-typeset .admonition.warning, .md-typeset .admonition.attention, .md-typeset .admonition.caution, @@ -766,7 +676,6 @@ code button:active { -webkit-mask-size: contain; } -/* Failure/Danger/Error - Alert (red) */ .md-typeset .admonition.failure, .md-typeset .admonition.danger, .md-typeset .admonition.error, @@ -789,7 +698,6 @@ code button:active { -webkit-mask-size: contain; } -/* Example - Chill (purple) for better visibility */ .md-typeset .admonition.example, .md-typeset details.example { border-color: var(--bfc-chill); @@ -808,7 +716,6 @@ code button:active { -webkit-mask-size: contain; } -/* Question - Chill (purple) */ .md-typeset .admonition.question, .md-typeset details.question { border-color: var(--bfc-chill); @@ -827,7 +734,6 @@ code button:active { -webkit-mask-size: contain; } -/* Bug - Alert (red) */ .md-typeset .admonition.bug, .md-typeset details.bug { border-color: var(--bfc-alert); @@ -846,7 +752,6 @@ code button:active { -webkit-mask-size: contain; } -/* Quote - Base dimmed */ .md-typeset .admonition.quote, .md-typeset details.quote { border-color: var(--bfc-base-dimmed); @@ -865,14 +770,12 @@ code button:active { -webkit-mask-size: contain; } -/* ============================================================================ - 11. TABLES - ============================================================================ */ +/* Tables */ .md-typeset table:not([class]) { border: 1px solid var(--bfc-base-dimmed); background-color: var(--bfc-base-3); - border-radius: 4px; + border-radius: var(--bf-radius-xs); overflow: hidden; } @@ -893,16 +796,14 @@ code button:active { background-color: var(--bfc-base-2); } -/* ============================================================================ - 12. BUTTONS - ============================================================================ */ +/* Buttons */ .md-button { background-color: var(--bfc-theme); color: var(--bfc-theme-c); border: none; padding: 0.625em 1.25em; - border-radius: 4px; + border-radius: var(--bf-radius-xs); font-family: "Open Sans", sans-serif; font-weight: 500; transition: @@ -922,11 +823,10 @@ code button:active { color: var(--bfc-theme-c); } -/* ============================================================================ - 13. FOOTER - ============================================================================ */ +/* Footer */ -/* Sticky footer - ensure footer stays at bottom even with minimal content */ +/* Sticky footer: flex column on body keeps the footer at the bottom even + when content is short. */ body { display: flex; flex-direction: column; @@ -971,14 +871,13 @@ body { background-color: var(--bfc-base-3); } -/* Override Material's default footer link color with more specific selector */ html .md-footer-meta.md-typeset a { - color: var(--bfc-theme) !important; + color: var(--bfc-theme); } html .md-footer-meta.md-typeset a:hover, html .md-footer-meta.md-typeset a:focus { - color: var(--bfc-theme-2) !important; + color: var(--bfc-theme-2); text-decoration: underline; } @@ -999,9 +898,7 @@ html .md-footer-meta.md-typeset a:focus { color: var(--bfc-base-c); } -/* ============================================================================ - 14. SEARCH - ============================================================================ */ +/* Search */ .md-search__form { background-color: var(--bfc-base-3); @@ -1011,12 +908,11 @@ html .md-footer-meta.md-typeset a:focus { background-color: var(--bfc-base-3); color: var(--bfc-base-c); border: 1px solid var(--bfc-base-dimmed); - border-radius: 4px; + border-radius: var(--bf-radius-xs); } -/* Search icon */ .md-search__icon { - color: var(--bfc-base-c) !important; + color: var(--bfc-base-c); } .md-search__input::placeholder { @@ -1029,7 +925,7 @@ html .md-footer-meta.md-typeset a:focus { .md-search__output { background-color: var(--bfc-base); - border-radius: 4px; + border-radius: var(--bf-radius-xs); box-shadow: var(--bf-shadow); } @@ -1055,24 +951,19 @@ html .md-footer-meta.md-typeset a:focus { color: var(--bfc-theme); } -/* ============================================================================ - 15. TABS AND TABBED CONTENT - ============================================================================ */ +/* Tabs and tabbed content */ -/* Inactive tab labels */ .md-typeset .tabbed-set > label { color: var(--bfc-base-c-2); font-weight: 500; border-bottom: 2px solid transparent; } -/* Hover state */ .md-typeset .tabbed-set > label:hover { color: var(--bfc-theme); border-bottom-color: var(--bfc-theme-fade); } -/* Active/checked tab - use theme color, not blue */ .md-typeset .tabbed-set > input:checked + label, .md-typeset .tabbed-set > input:focus + label, .md-typeset .tabbed-set > label.active { @@ -1081,18 +972,16 @@ html .md-footer-meta.md-typeset a:focus { border-bottom-color: var(--bfc-theme); } -/* Override Material's default blue active indicator */ .md-typeset .tabbed-set > input:checked + label::after { background-color: var(--bfc-theme); } -/* Focus state */ .md-typeset .tabbed-set > label:focus { outline: 2px solid var(--bfc-theme); outline-offset: 2px; } -/* Ultra-specific targeting to override Material's blue tabs */ +/* Material wins on specificity for tabs unless we match its 5+ class chain. */ html body .md-container .md-main .md-content .md-typeset .tabbed-set > input:checked + label, html body .md-container .md-typeset .tabbed-set > input:checked + label, html body .md-typeset .tabbed-set > input:checked + label, @@ -1104,7 +993,6 @@ html .md-typeset .tabbed-set > input:checked + label, border-bottom: 2px solid var(--bfc-theme); } -/* Target the pseudo-elements with maximum specificity */ html body .md-container .md-main .md-content .md-typeset .tabbed-set > input:checked + label::after, html body .md-container .md-typeset .tabbed-set > input:checked + label::after, html body .md-typeset .tabbed-set > input:checked + label::after, @@ -1114,7 +1002,6 @@ html .md-typeset .tabbed-set > input:checked + label::after, border-color: var(--bfc-theme); } -/* Target focus states */ html body .md-container .md-main .md-content .md-typeset .tabbed-set > input:focus + label, html body .md-container .md-typeset .tabbed-set > input:focus + label, html body .md-typeset .tabbed-set > input:focus + label, @@ -1125,14 +1012,11 @@ html .md-typeset .tabbed-set > input:focus + label, border-bottom-color: var(--bfc-theme); } -/* Ensure the tab content area uses theme colors */ .md-typeset .tabbed-content { border-color: var(--bfc-base-dimmed); } -/* ============================================================================ - 16. PAGINATION - ============================================================================ */ +/* Pagination */ .md-footer__link { transition: background-color 0.2s ease; @@ -1142,21 +1026,16 @@ html .md-typeset .tabbed-set > input:focus + label, background-color: var(--bfc-base-2); } -/* ============================================================================ - 17. ANNOUNCEMENT BAR - ============================================================================ */ +/* Announcement bar */ .md-announce { background-color: var(--bfc-theme-fade); color: var(--bfc-theme-fade-c); } -/* ============================================================================ - 18. RESPONSIVE DESIGN - ============================================================================ */ +/* Responsive design */ @media screen and (max-width: 76.1875em) { - /* Mobile adjustments */ .md-nav--primary .md-nav__title { background-color: var(--bfc-base-2); color: var(--bfc-base-c); @@ -1167,9 +1046,7 @@ html .md-typeset .tabbed-set > input:focus + label, } } -/* ============================================================================ - 19. ACCESSIBILITY - ============================================================================ */ +/* Accessibility */ a:focus, button:focus, @@ -1183,16 +1060,13 @@ input:focus { color: var(--bfc-theme-c); } -/* Focus visible (keyboard navigation) */ a:focus-visible, button:focus-visible { outline: 2px solid var(--bfc-theme); outline-offset: 2px; } -/* ============================================================================ - 20. SCROLLBAR STYLING - ============================================================================ */ +/* Scrollbar */ ::-webkit-scrollbar { width: 8px; @@ -1205,18 +1079,15 @@ button:focus-visible { ::-webkit-scrollbar-thumb { background: var(--bfc-base-dimmed); - border-radius: 4px; + border-radius: var(--bf-radius-xs); } ::-webkit-scrollbar-thumb:hover { background: var(--bfc-base-c-2); } -/* ============================================================================ - 21. VERSION BADGE - ============================================================================ */ +/* Version badge */ -/* Positioning for version badge in the header */ .bf-header-version { align-self: center; flex-shrink: 0; @@ -1225,38 +1096,31 @@ button:focus-visible { font-family: "Open Sans", sans-serif; } -/* ============================================================================ - 22. MISCELLANEOUS - ============================================================================ */ +/* Miscellaneous */ -/* Horizontal rules */ .md-typeset hr { border-bottom: 1px solid var(--bfc-base-dimmed); } -/* Blockquotes */ .md-typeset blockquote { border-left: 4px solid var(--bfc-base-dimmed); color: var(--bfc-base-c-2); } -/* Keyboard keys */ .md-typeset kbd { background-color: var(--bfc-base-2); color: var(--bfc-base-c); border: 1px solid var(--bfc-base-dimmed); - border-radius: 3px; + border-radius: var(--bf-radius-xs); box-shadow: 0 1px 0 var(--bfc-base-dimmed); } -/* Tags/badges */ .md-tag { background-color: var(--bfc-theme-fade); color: var(--bfc-theme-fade-c); - border-radius: 3px; + border-radius: var(--bf-radius-xs); } -/* Print styles */ @media print { body { background-color: white; @@ -1264,11 +1128,8 @@ button:focus-visible { } } -/* ============================================================================ - FINAL OVERRIDES - Use cascade layer for higher specificity than Material - ============================================================================ */ - -/* Override Material's generated styles after they load */ +/* Late overrides — these target Material styles applied after page load. + They sit at the end of the file so source order beats earlier rules. */ .md-typeset a:focus, .md-typeset a:hover { color: var(--bfc-theme); @@ -1280,7 +1141,6 @@ button:focus-visible { color: var(--bfc-theme); } -/* Tab navigation active states */ .md-tabs__item--active .md-tabs__link { color: var(--bfc-theme); } @@ -1290,7 +1150,6 @@ button:focus-visible { color: var(--bfc-theme); } -/* Tabbed content active states */ .tabbed-set > input:checked + label { color: var(--bfc-theme); border-color: transparent; @@ -1311,7 +1170,6 @@ button:focus-visible { background: transparent; } -/* Button and clipboard active states */ .md-clipboard, .md-clipboard:focus, .md-clipboard:hover { @@ -1338,17 +1196,11 @@ button:focus-visible { color: var(--bfc-theme); } -/* Remove background from code navigation container */ .md-code__nav { background: transparent; } -/* ============================================================================ - 15. SYNTAX HIGHLIGHTING - ============================================================================ */ - -/* Pygments syntax highlighting with Bifrost colors */ -/* Use high specificity selectors to override Material defaults */ +/* Syntax highlighting (Pygments tokens mapped to Bifrost colors) */ html body .md-typeset .highlight .hll, html body .md-typeset div[class*="language-"].highlight .hll { background-color: var(--bfc-theme-fade); @@ -1579,9 +1431,7 @@ html body .md-typeset div[class*="language-"].highlight .l-Scalar-Plain { color: html body .md-typeset .highlight .p-Indicator, html body .md-typeset div[class*="language-"].highlight .p-Indicator { color: var(--bfc-base-c-2); } /* YAML Indicators */ -/* Diverse color scheme using different Bifrost colors */ - -/* Keywords (def, return, etc.) - Theme color, bold */ +/* Higher-specificity Pygments overrides — keep below the simple rules above. */ html body .md-typeset .highlight .k, html body .md-typeset .highlight .kd, html body .md-typeset .highlight .kn, @@ -1596,7 +1446,6 @@ html body .md-typeset div[class*="language-"].highlight .kr { font-weight: bold; } -/* Built-in constants (True, False, None) - Alert color */ html body .md-typeset .highlight .kc, html body .md-typeset .highlight .kt, html body .md-typeset div[class*="language-"].highlight .kc, @@ -1605,7 +1454,6 @@ html body .md-typeset div[class*="language-"].highlight .kt { font-weight: bold; } -/* Strings - Bifrost success color with light/dark adaptation */ html body .md-typeset .highlight .s, html body .md-typeset .highlight .s1, html body .md-typeset .highlight .s2, @@ -1624,11 +1472,10 @@ html body .md-typeset div[class*="language-"].highlight .sh, html body .md-typeset div[class*="language-"].highlight .sx, html body .md-typeset div[class*="language-"].highlight .sr, html body .md-typeset div[class*="language-"].highlight .ss { - color: var(--bifrost-success); + color: var(--bfc-success); font-weight: normal; } -/* Functions and built-ins (print, hello_world) - Base color */ html body .md-typeset .highlight .nb, html body .md-typeset .highlight .nf, html body .md-typeset div[class*="language-"].highlight .nb, @@ -1637,7 +1484,6 @@ html body .md-typeset div[class*="language-"].highlight .nf { font-weight: normal; } -/* Comments - Dimmed, italic */ html body .md-typeset .highlight .c, html body .md-typeset .highlight .c1, html body .md-typeset .highlight .cm, @@ -1655,7 +1501,6 @@ html body .md-typeset div[class*="language-"].highlight .sd { font-weight: normal; } -/* Punctuation and operators - Base color */ html body .md-typeset .highlight .p, html body .md-typeset .highlight .o, html body .md-typeset div[class*="language-"].highlight .p, @@ -1664,38 +1509,33 @@ html body .md-typeset div[class*="language-"].highlight .o { font-weight: normal; } -/* YAML-specific syntax highlighting */ -/* YAML keys and tags - Theme color */ +/* YAML-specific token colors */ html body .md-typeset .highlight .nt, html body .md-typeset div[class*="language-"].highlight .nt { color: var(--bfc-theme); font-weight: bold; } -/* YAML anchors and labels - Base text color for better contrast */ html body .md-typeset .highlight .nl, html body .md-typeset div[class*="language-"].highlight .nl { color: var(--bfc-base-c); font-weight: normal; } -/* YAML scalar values - Bifrost success color with light/dark adaptation */ html body .md-typeset .highlight .l-Scalar, html body .md-typeset .highlight .l-Scalar-Plain, html body .md-typeset div[class*="language-"].highlight .l-Scalar, html body .md-typeset div[class*="language-"].highlight .l-Scalar-Plain { - color: var(--bifrost-success); + color: var(--bfc-success); font-weight: normal; } -/* YAML indicators (-, :, etc.) - Base color */ html body .md-typeset .highlight .p-Indicator, html body .md-typeset div[class*="language-"].highlight .p-Indicator { color: var(--bfc-base-c); font-weight: normal; } -/* Remove borders from all Material buttons */ html body .md-button, html body .md-button:focus, html body .md-button:hover, @@ -1714,7 +1554,6 @@ html body button:hover { box-shadow: none; } -/* Force override tab button styling with high specificity */ html body .md-typeset .tabbed-set > label, html body .md-typeset .tabbed-set > label:focus, html body .md-typeset .tabbed-set > label:hover { @@ -1738,7 +1577,6 @@ html body .md-typeset .tabbed-set > input:checked + label { box-shadow: none; } -/* Target the actual tabbed labels structure from the HTML */ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels label, html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels label:focus, html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels label:hover, @@ -1762,7 +1600,6 @@ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-lab color: var(--bfc-base-c); } -/* Target active tab using CSS :has() selector or fallback to specific IDs */ html body .md-container .md-main .md-content .md-typeset .tabbed-set:has(input#__tabbed_1_1:checked) .tabbed-labels label[for="__tabbed_1_1"], html body .md-container .md-main .md-content .md-typeset .tabbed-set:has(input#__tabbed_1_2:checked) .tabbed-labels label[for="__tabbed_1_2"], html body .md-container .md-main .md-content .md-typeset .tabbed-set:has(input#__tabbed_1_3:checked) .tabbed-labels label[for="__tabbed_1_3"], @@ -1782,7 +1619,6 @@ html body .md-container .md-main .md-content .md-typeset .tabbed-set:has(input#_ box-shadow: none; } -/* Remove all unwanted lines and borders from tabbed elements */ html body .md-container .md-main .md-content .md-typeset .tabbed-set, html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels, html body .md-container .md-main .md-content .md-typeset .tabbed-set::before, @@ -1795,14 +1631,12 @@ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-lab box-shadow: none; } -/* Force override Material's theme color variables specifically for tabbed elements */ html body .md-container .md-main .md-content .md-typeset .tabbed-set, html body .md-container .md-main .md-content .md-typeset .tabbed-set.tabbed-alternate { --md-primary-fg-color: var(--bfc-base-dimmed); --md-accent-fg-color: var(--bfc-base-dimmed); } -/* Target the tabbed-alternate variant specifically */ html body .md-container .md-main .md-content .md-typeset .tabbed-set.tabbed-alternate .tabbed-labels label::before, html body .md-container .md-main .md-content .md-typeset .tabbed-set.tabbed-alternate .tabbed-labels label::after { background: var(--bfc-base-dimmed); @@ -1812,7 +1646,6 @@ html body .md-container .md-main .md-content .md-typeset .tabbed-set.tabbed-alte fill: var(--bfc-base-dimmed); } -/* Change vertical lines to dimmed color with maximum specificity */ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels label::before, html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels label::after, html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels::before { @@ -1823,7 +1656,6 @@ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-lab fill: var(--bfc-base-dimmed); } -/* Allow the horizontal line ::after but remove any other styling */ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels::after { border: 0; box-shadow: none; @@ -1831,7 +1663,6 @@ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-lab visibility: visible; } -/* Force override all possible border properties on tab labels only */ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels label { position: relative; border-left: 0; @@ -1840,14 +1671,12 @@ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-lab background-image: none; } -/* Target specific label positions to remove separators */ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels label + label { border-left: 0; margin-left: 0; padding-left: inherit; } -/* Remove any inset shadows or borders from tab container only */ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels { box-shadow: none; background-image: none; @@ -1855,7 +1684,7 @@ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-lab position: relative; } -/* Add the horizontal line under all tabs */ +/* Single horizontal divider under the tab row, drawn via the labels' ::after. */ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels::after { content: ""; display: block; @@ -1868,7 +1697,6 @@ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-lab z-index: 0; } -/* Force remove vertical borders with extreme specificity */ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels label[for] { position: relative; z-index: 1; @@ -1885,7 +1713,6 @@ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-lab border-right: 1px solid var(--bfc-base-dimmed); } -/* Direct override of Material's CSS variables within tabbed context */ html body .md-container .md-main .md-content .md-typeset .tabbed-set { --md-primary-fg-color: var(--bfc-base-dimmed); --md-primary-fg-color--light: var(--bfc-base-dimmed); @@ -1894,20 +1721,17 @@ html body .md-container .md-main .md-content .md-typeset .tabbed-set { --md-accent-fg-color--transparent: var(--bfc-base-dimmed); } -/* Override any border styles on the labels themselves */ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels label { border-left-color: var(--bfc-base-dimmed); border-right-color: var(--bfc-base-dimmed); } -/* Force Material's default border properties to use dimmed color */ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-labels label + label:before { background: var(--bfc-base-dimmed); border-left: 1px solid var(--bfc-base-dimmed); } -/* Completely remove vertical lines from tabs by hiding pseudo-elements */ .md-typeset .tabbed-set > input + label:before, .md-typeset .tabbed-set > input + label:after, .md-typeset .tabbed-labels > label:before, @@ -1926,7 +1750,6 @@ html body .md-container .md-main .md-content .md-typeset .tabbed-set .tabbed-lab visibility: hidden; } -/* Force override of any Material theme color usage in tabbed context */ html body .md-typeset .tabbed-set, html body .md-typeset .tabbed-alternate, html body .md-content .tabbed-set, @@ -1938,7 +1761,6 @@ html body .md-content .tabbed-alternate { --md-typeset-color: var(--bfc-base-c); } -/* Search and form elements */ .md-search__input:focus { border-color: var(--bfc-theme); } @@ -1947,7 +1769,6 @@ html body .md-content .tabbed-alternate { background-color: var(--bfc-base); } -/* Navigation elements */ .md-nav__link--active { color: var(--bfc-theme); } @@ -1957,7 +1778,6 @@ html body .md-content .tabbed-alternate { color: var(--bfc-theme); } -/* Remove borders from navigation links */ .md-nav__link, .md-nav__link:focus, .md-nav__link:hover, @@ -1966,17 +1786,10 @@ html body .md-content .tabbed-alternate { outline: none; } -/* Remove borders and outlines from all links on hover/focus */ a, a:hover, a:focus, -a:active { - border: none; - outline: none; - box-shadow: none; -} - -/* Specifically target Material's content links */ +a:active, .md-typeset a, .md-typeset a:hover, .md-typeset a:focus, diff --git a/src/intility_bifrost_mkdocs/overrides/assets/stylesheets/extra.css b/src/intility_bifrost_mkdocs/overrides/assets/stylesheets/extra.css deleted file mode 100644 index fde519f..0000000 --- a/src/intility_bifrost_mkdocs/overrides/assets/stylesheets/extra.css +++ /dev/null @@ -1,1230 +0,0 @@ -/* Custom styles for Developer Platform Docs */ - -/* Font imports */ -@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap"); - -/* Base font size for better readability */ -html { - font-size: 18px; -} - -body { - font-size: 18px; -} - -/* Satoshi Variable - Self-hosted from Fontshare */ -@font-face { - font-family: 'Satoshi'; - src: url('../fonts/satoshi-variable.woff2') format('woff2-variations'); - font-weight: 300 900; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Satoshi'; - src: url('../fonts/satoshi-variable-italic.woff2') format('woff2-variations'); - font-weight: 300 900; - font-style: italic; - font-display: swap; -} - -/* Fonts - Bifrost standard: Satoshi Variable for headings, Open Sans for everything else */ - -/* Headings use Satoshi Variable with OpenType features */ -h1, h2, h3, h4, h5, h6 { - font-family: 'Satoshi', 'Open Sans', Arial, sans-serif; - font-feature-settings: "ss02", "ss03", "ss04", "liga" 0; -} - -/* H1 uses base-c color and Bifrost h1 font size */ -.md-typeset h1 { - color: var(--md-base-c); - font-size: 32px; - font-weight: 600; -} - -/* Header uses Satoshi Variable */ -.md-header, .md-header__title { - font-family: 'Satoshi', 'Open Sans', Arial, sans-serif; - font-feature-settings: "ss02", "ss03", "ss04", "liga" 0; -} - -/* Body content uses Open Sans */ -.md-content { - font-family: 'Open Sans', Arial, sans-serif; -} - -/* Code uses JetBrains Mono */ -.md-code { - font-family: 'JetBrains Mono', monospace; -} - -/* Content width constraints */ -.md-content { - max-width: 1200px; - margin: 0 auto; -} - -.md-content__inner { - margin: 0 1.5rem; - padding: 1rem 0; -} - -/* Main content area */ -.md-main__inner { - max-width: 1200px; - margin: 0 auto; - padding-top: 40px; -} - -/* Grid layout adjustments */ -.md-grid { - max-width: 1200px; - margin: 0 auto; -} - -/* Work with Material theme - keep default footer behavior */ -/* Just adjust the footer styling, not the layout */ - -.md-footer-meta__inner { - padding: 20px 24px; - display: flex; - flex-direction: column; - justify-content: center; - min-height: 77.9px; -} - -/* Typeset content width */ -.md-typeset { - max-width: 1200px; -} - -/* Colors */ -/* Light mode overrides */ -[data-md-color-scheme="light"] { - /* Bifrost semantic color names */ - --md-base-c: #071627; - --md-base-c-theme: #071627; - --md-base-3: #F9F9FA; - --md-chill: #631CCF; - --md-base-c-dimmed: #565776; - --md-success: #007A4B; - --md-base-1: #F3F3F6; - --md-base-3-bg: #FFFFFF; - - /* Material theme compatibility - use theme color for primary and accent */ - --md-primary-fg-color: var(--md-brand); - --md-accent-fg-color: var(--md-brand); - --md-accent2-fg-color: var(--md-brand); - --md-accent3-fg-color: var(--md-base-3); - --md-accent4-fg-color: var(--md-chill); - --md-accent5-fg-color: var(--md-brand); - --md-dimmed-fg-color: var(--md-base-c-dimmed); - --md-success-fg-color: var(--md-success); - --md-scheme-fg-color: var(--md-base-1); - --md-default-bg-color: var(--md-base-1); - --md-secondary-bg-color: var(--md-base-3-bg); - - /* Override Material theme's code block background to match header */ - --md-code-bg-color: var(--md-base-3-bg); - --md-code-hl-color: var(--md-base-3-bg); - --md-code-bg: var(--md-base-3-bg); - /* Override Material theme's code block border radius */ - --md-code-border-radius: 0.5rem; -} - -/* Dark mode overrides */ -[data-md-color-scheme="dark"] { - /* Bifrost semantic color names */ - --md-base-c: #F3F3F6; - --md-base-c-theme: #F3F3F6; - --md-attn: #0DF2D7; - --md-brand: #0DF2D7; - --md-base-3: #0A1C2E; - --md-chill: #AD8AFF; - --md-theme-fade: #0DF2D7; - --md-base-c-dimmed: #8A98A8; - --md-success: #00F597; - --md-base-1: #071627; - --md-base-2: #0F2133; - - /* Material theme compatibility - use theme color for primary and accent */ - --md-primary-fg-color: var(--md-brand); - --md-accent-fg-color: var(--md-brand); - --md-accent2-fg-color: var(--md-brand); - --md-accent3-fg-color: var(--md-base-3); - --md-accent4-fg-color: var(--md-chill); - --md-accent5-fg-color: var(--md-brand); - --md-dimmed-fg-color: var(--md-base-c-dimmed); - --md-success-fg-color: var(--md-success); - --md-scheme-fg-color: var(--md-base-1); - --md-default-bg-color: var(--md-base-1); - --md-secondary-bg-color: var(--md-base-2); - - /* Override Material theme's code block background to match header */ - --md-code-bg-color: var(--md-base-2); - --md-code-hl-color: var(--md-base-2); - --md-code-bg: var(--md-base-2); - /* Override Material theme's code block border radius */ - --md-code-border-radius: 0.5rem; -} - -/* Grid cards for homepage */ -.md-typeset .grid.cards { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 1rem; - margin: 2rem 0; -} - -.md-typeset .grid.cards > * { - background: var(--md-code-bg-color); - border: 1px solid var(--md-default-fg-color--lightest); - border-radius: 16px; - padding: 1.5rem; - transition: all 0.3s ease; - position: relative; -} - -.md-typeset .grid.cards > *:hover { - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - border-color: var(--md-primary-fg-color); -} - -/* Card header styling - Bifrost h5 */ -.md-typeset .grid.cards strong { - font-family: 'Satoshi', 'Open Sans', Arial, sans-serif; - font-feature-settings: "ss02", "ss03", "ss04", "liga" 0; - font-size: 18px; - font-weight: 600; - color: var(--md-base-c); -} - -/* Card paragraph text - base-c color and Bifrost large size */ -.md-typeset .grid.cards p { - color: var(--md-base-c); - font-size: 16px; -} - -/* Arrow link in top right corner - CSS arrow */ -.md-typeset .grid.cards .card-arrow-link { - position: absolute; - top: 1.25rem; - right: 1.25rem; - text-decoration: none; - transition: all 0.2s ease; - z-index: 10; - display: inline-block; - width: 20px; - height: 20px; -} - -/* Create arrow using CSS borders */ -.md-typeset .grid.cards .card-arrow-link::before { - content: ""; - display: block; - width: 10px; - height: 10px; - border-top: 2px solid var(--md-base-c-dimmed); - border-right: 2px solid var(--md-base-c-dimmed); - transform: rotate(45deg); - transition: border-color 0.2s ease; -} - -.md-typeset .grid.cards .card-arrow-link:hover { - transform: translateX(4px); -} - -.md-typeset .grid.cards .card-arrow-link:hover::before, -.md-typeset .grid.cards li:hover .card-arrow-link::before { - border-top-color: var(--md-base-c); - border-right-color: var(--md-base-c); -} - -/* Custom admonition styling */ - -/* Tip */ -.md-typeset .admonition.tip, -.md-typeset details.tip, .md-typeset .admonition-title::before { - border-color: var(--md-brand); -} - -.md-typeset .tip > .admonition-title::before, .md-typeset .tip > summary::before { - background-color: var(--md-brand); -} - -.md-typeset .tip > .admonition-title::before, .md-typeset .tip > summary::after { - background-color: var(--md-brand); -} - -.md-typeset .tip > .admonition-title, .md-typeset .tip > summary { - background-color: var(--md-base-3); -} - -/* Info */ -.md-typeset .admonition.info, -.md-typeset details.info { - border-color: var(--md-attn); - -} - -.md-typeset .info > .admonition-title::before, .md-typeset .info > summary::before { - background-color: var(--md-attn); -} - -.md-typeset .info > .admonition-title::before, .md-typeset .info > summary::after { - background-color: var(--md-attn); -} - -.md-typeset .info > .admonition-title, .md-typeset .info > summary { - background-color: var(--md-base-3); -} - -/* Abstract */ -.md-typeset .admonition.abstract, -.md-typeset details.abstract { - border-color: var(--md-chill); -} - -.md-typeset .abstract > .admonition-title::before, .md-typeset .abstract > summary::before { - background-color: var(--md-chill); -} - -.md-typeset .abstract > .admonition-title::before, .md-typeset .abstract > summary::after { - background-color: var(--md-chill); -} - -.md-typeset .abstract > .admonition-title, .md-typeset .abstract > summary { - background-color: var(--md-base-3); -} - -/* Note */ -.md-typeset .admonition.note, -.md-typeset details.note { - border-color: var(--md-theme-fade); -} - -.md-typeset .note > .admonition-title::before, .md-typeset .note > summary::before { - background-color: var(--md-theme-fade); -} - -.md-typeset .note > .admonition-title::before, .md-typeset .note > summary::after { - background-color: var(--md-theme-fade); -} - -.md-typeset .note > .admonition-title, .md-typeset .note > summary { - background-color: var(--md-base-3); -} - -/* Example */ -.md-typeset .admonition.example, -.md-typeset details.example { - border-color: var(--md-base-c-dimmed); -} - -.md-typeset .example > .admonition-title::before, .md-typeset .example > summary::before { - background-color: var(--md-base-c-dimmed); -} - -.md-typeset .example > .admonition-title::before, .md-typeset .example > summary::after { - background-color: var(--md-base-c-dimmed); -} - -.md-typeset .example > .admonition-title, .md-typeset .example > summary { - background-color: var(--md-base-3); -} - -/* Success */ -.md-typeset .admonition.success, -.md-typeset details.success { - border-color: var(--md-success); -} - -.md-typeset .success > .admonition-title::before, .md-typeset .success > summary::before { - background-color: var(--md-success); -} - -.md-typeset .success > .admonition-title::before, .md-typeset .success > summary::after { - background-color: var(--md-success); -} - -.md-typeset .success > .admonition-title, .md-typeset .success > summary { - background-color: var(--md-base-3); -} - -/* Header styling */ -.md-header { - color: var(--md-base-c-theme) !important; -} - -/* Light mode header background */ -[data-md-color-scheme="light"] .md-header { - background-color: var(--md-base-3-bg) !important; -} - -/* Dark mode header background */ -[data-md-color-scheme="slate"] .md-header { - background-color: var(--md-base-2) !important; -} - -[data-md-component="tabs"] { - font-family: 'Satoshi', 'Open Sans', Arial, sans-serif; - font-feature-settings: "ss02", "ss03", "ss04", "liga" 0; - color: var(--md-base-c-theme) !important; -} - -/* Tab labels - set font size to 16px with higher specificity */ -.md-header .md-tabs .md-tabs__list .md-tabs__item .md-tabs__link { - font-size: 16px; - font-family: 'Open Sans', Arial, sans-serif; - color: var(--md-base-c-theme); -} - -/* Tab content within tabbed sections - high specificity selector */ -.md-content .md-typeset .tabbed-set > .tabbed-content { - font-size: 16px; - font-family: 'Open Sans', Arial, sans-serif; -} - -/* Tab button labels in pymdownx.tabbed content - high specificity */ -.md-content .md-typeset .tabbed-set .tabbed-labels > label { - font-size: 16px; - font-family: 'Open Sans', Arial, sans-serif; - color: var(--md-base-c); -} - -/* Active tab button styling */ -.md-content .md-typeset .tabbed-set .tabbed-labels > label:hover, -.md-content .md-typeset .tabbed-set .tabbed-labels > label[for]:hover { - color: var(--md-attn); -} - -/* Content inside tabbed panels - very specific selectors */ -.md-content .md-typeset .tabbed-set .tabbed-content p, -.md-content .md-typeset .tabbed-set .tabbed-content li, -.md-content .md-typeset .tabbed-set .tabbed-content ul, -.md-content .md-typeset .tabbed-set .tabbed-content ol { - font-size: 16px; - font-family: 'Open Sans', Arial, sans-serif; -} - -.md-content .md-typeset .tabbed-set .tabbed-content h1, -.md-content .md-typeset .tabbed-set .tabbed-content h2, -.md-content .md-typeset .tabbed-set .tabbed-content h3, -.md-content .md-typeset .tabbed-set .tabbed-content h4, -.md-content .md-typeset .tabbed-set .tabbed-content h5, -.md-content .md-typeset .tabbed-set .tabbed-content h6 { - font-size: inherit; - font-family: 'Satoshi', 'Open Sans', Arial, sans-serif; -} - -/* Light mode tabs background */ -[data-md-color-scheme="light"] [data-md-component="tabs"] { - background-color: var(--md-base-3-bg) !important; -} - -/* Dark mode tabs background */ -[data-md-color-scheme="slate"] [data-md-component="tabs"] { - background-color: var(--md-base-2) !important; -} - -.md-header__title { - color: var(--md-base-c-theme); - font-weight: 640; - font-size: 16px; -} - -.md-header__topic:first-child { - font-weight: 740; -} - -.md-header__topic { - font-weight: 740; -} - -/* Header navigation items */ -.md-header__option { - color: var(--md-base-c-theme) !important; -} - -.md-header__button { - color: var(--md-base-c-theme) !important; -} - -.md-header__button:hover { - color: var(--md-brand) !important; -} - -/* Hamburger menu (mobile navigation toggle) styling */ -.md-header__button.md-icon { - color: var(--md-base-c-theme) !important; -} - -.md-header__button.md-icon:hover { - color: var(--md-attn) !important; -} - -/* Theme toggle button positioning */ -.md-header__option[data-md-component="palette"] { - order: 999; - margin-left: auto; -} - -/* Ensure header has flex layout */ -.md-header__inner { - display: flex; - align-items: center; -} - -/* Search and other header elements */ -.md-search__input { - color: var(--md-base-c-theme) !important; -} - -.md-search__input::placeholder { - color: var(--md-base-c-dimmed) !important; -} - -/* Navigation styling */ -.md-nav__item--active > .md-nav__link { - color: var(--md-attn); -} - -/* Table of contents header */ -.md-nav--secondary .md-nav__title { - color: var(--md-base-c); -} - -/* Highlight active ToC link*/ -.md-nav__link--active, -.md-nav__item--active > .md-nav__link { - color: var(--md-attn) !important; -} - -/* Make navigation section titles more prominent */ -.md-nav--primary .md-nav__item--section > .md-nav__link, -.md-nav--secondary .md-nav__item--section > .md-nav__link { - font-weight: 740; - letter-spacing: 0.01em; -} - -/* Light mode section titles - use base-c color */ -[data-md-color-scheme="light"] .md-nav--primary .md-nav__item--section > .md-nav__link, -[data-md-color-scheme="light"] .md-nav--secondary .md-nav__item--section > .md-nav__link { - color: var(--md-base-c); -} - -/* Dark mode section titles - use base-c color */ -[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--section > .md-nav__link, -[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__item--section > .md-nav__link { - color: var(--md-base-c); -} - -/*Custom link styling */ -.md-typeset a { - color: var(--md-attn); - font-weight: normal; -} - -.md-typeset a:hover { - color: var(--md-attn); - text-decoration: underline; -} - -/* Code block styling */ -.md-typeset pre > code { - font-size: 0.85rem; -} - -/* Code syntax highlighting using Bifrost colors */ -/* Light mode code highlighting */ -[data-md-color-scheme="light"] { - /* Keywords - use strong theme color for high contrast */ - .highlight .k, - .highlight .kn, - .highlight .kp, - .highlight .kr, - .highlight .kt { - color: var(--bfc-theme-3, var(--md-base-c-theme)); /* Fallback to existing color */ - } - - /* Strings - use brand color */ - .highlight .s, - .highlight .s1, - .highlight .s2, - .highlight .sb, - .highlight .sc, - .highlight .sd, - .highlight .se, - .highlight .sh, - .highlight .si, - .highlight .sx, - .highlight .sr, - .highlight .ss { - color: var(--bfc-brand, var(--md-brand)); /* Fallback to existing brand color */ - } - - /* Comments - use base-2 for subtle but readable text */ - .highlight .c, - .highlight .c1, - .highlight .cm, - .highlight .cp, - .highlight .cs { - color: var(--bfc-base-2, var(--md-base-c-dimmed)); /* Fallback to existing dimmed */ - font-style: italic; - } - - /* Numbers - use success color */ - .highlight .m, - .highlight .mf, - .highlight .mh, - .highlight .mi, - .highlight .mo { - color: var(--bfc-success, var(--md-success)); /* Fallback to existing success */ - } - - /* Functions - use attention color */ - .highlight .nf, - .highlight .fm { - color: var(--bfc-attn, var(--md-attn)); /* Fallback to existing attention */ - } - - /* Classes - use chill color */ - .highlight .nc { - color: var(--bfc-chill, var(--md-chill)); /* Fallback to existing chill */ - } - - /* Variables - use theme-2 */ - .highlight .na, - .highlight .nv, - .highlight .vc, - .highlight .vg, - .highlight .vi { - color: var(--bfc-theme-2, var(--md-base-c-theme)); /* Fallback to theme color */ - } - - /* Operators - use theme-1 */ - .highlight .o, - .highlight .ow { - color: var(--bfc-theme-1, var(--md-brand)); /* Fallback to brand */ - } - - /* Built-ins and exceptions - use warning color */ - .highlight .nb, - .highlight .ne { - color: var(--bfc-warning, var(--md-attn)); /* Fallback to attention */ - } - - /* Decorators and annotations - use alert */ - .highlight .nd, - .highlight .ni { - color: var(--bfc-alert, var(--md-theme-fade)); /* Fallback to theme-fade */ - } -} - -/* Dark mode code highlighting */ -[data-md-color-scheme="dark"] { - /* Keywords */ - .highlight .k, - .highlight .kn, - .highlight .kp, - .highlight .kr, - .highlight .kt { - color: var(--bfc-theme, var(--md-base-c-theme)); /* Fallback to existing theme */ - } - - /* Strings */ - .highlight .s, - .highlight .s1, - .highlight .s2, - .highlight .sb, - .highlight .sc, - .highlight .sd, - .highlight .se, - .highlight .sh, - .highlight .si, - .highlight .sx, - .highlight .sr, - .highlight .ss { - color: var(--bfc-brand, var(--md-brand)); /* Fallback to existing brand */ - } - - /* Comments */ - .highlight .c, - .highlight .c1, - .highlight .cm, - .highlight .cp, - .highlight .cs { - color: var(--bfc-base-2, var(--md-base-c-dimmed)); /* Fallback to existing dimmed */ - font-style: italic; - } - - /* Numbers */ - .highlight .m, - .highlight .mf, - .highlight .mh, - .highlight .mi, - .highlight .mo { - color: var(--bfc-success, var(--md-success)); /* Fallback to existing success */ - } - - /* Functions */ - .highlight .nf, - .highlight .fm { - color: var(--bfc-attn, var(--md-attn)); /* Fallback to existing attention */ - } - - /* Classes */ - .highlight .nc { - color: var(--bfc-chill, var(--md-chill)); /* Fallback to existing chill */ - } - - /* Variables */ - .highlight .na, - .highlight .nv, - .highlight .vc, - .highlight .vg, - .highlight .vi { - color: var(--bfc-theme-2, var(--md-base-c-theme)); /* Fallback to theme color */ - } - - /* Operators */ - .highlight .o, - .highlight .ow { - color: var(--bfc-theme-1, var(--md-brand)); /* Fallback to brand */ - } - - /* Built-ins and exceptions */ - .highlight .nb, - .highlight .ne { - color: var(--bfc-warning, var(--md-attn)); /* Fallback to attention */ - } - - /* Decorators and annotations */ - .highlight .nd, - .highlight .ni { - color: var(--bfc-alert, var(--md-theme-fade)); /* Fallback to theme-fade */ - } -} - -/* Enhanced inline code styling with Bifrost colors */ -.md-typeset code { - color: var(--bfc-brand, var(--md-brand)); - background-color: var(--bfc-base-3-bg, var(--md-code-bg-color)); - border-radius: 0.25rem; - padding: 0.125rem 0.25rem; - border: 1px solid var(--bfc-base-2, var(--md-default-fg-color--lightest)); -} - -/* Remove all borders and backgrounds from code block containers */ -.md-typeset .highlight, -.md-typeset .codehilite, -.md-typeset pre { - background-color: transparent; - border: none; - border-radius: 0; - box-shadow: none; - padding: 0; - margin: 0; -} - -/* Apply background and styling only to the code element itself */ -.md-typeset .highlight pre code, -.md-typeset .codehilite pre code, -.md-typeset pre code { - background-color: var(--md-code-bg-color); - border-radius: 0.5rem; - padding: 1rem; - display: block; - margin: 0; -} - -/* Table styling */ -.md-typeset table { - margin: 1.5rem 0; -} - -.md-typeset table th { - background-color: var(--md-default-fg-color--lightest); - font-weight: 600; -} - -/* Grid cards styling */ -.md-typeset .grid.cards > ol > li, -.md-typeset .grid.cards > ul > li, -.md-typeset .grid > .card { - border-radius: 16px; - position: relative; - overflow: hidden; -} - -.md-typeset .grid.cards > ol > li:focus-within, -.md-typeset .grid.cards > ol > li:hover, -.md-typeset .grid.cards > ul > li:focus-within, -.md-typeset .grid.cards > ul > li:hover, -.md-typeset .grid > .card:focus-within, -.md-typeset .grid > .card:hover { - border: .05rem solid var(--md-default-fg-color--lightest); - box-shadow: none; - } - -/* Footer styling with Bifrost colors */ -.md-footer { - margin-top: 4rem; - background-color: var(--bfc-base-1, var(--md-base-1)) !important; - color: var(--bfc-base, var(--md-base-c-theme)) !important; -} - -.md-footer__inner { - background-color: var(--bfc-base-3, var(--md-base-3)) !important; -} - -/* Footer navigation links */ -.md-footer__link { - color: var(--bfc-base, var(--md-base-c-theme)) !important; - transition: color 0.2s ease; -} - -.md-footer__link:hover { - color: var(--bfc-attn, var(--md-attn)) !important; -} - -/* Footer navigation titles */ -.md-footer__title { - color: var(--bfc-base-2, var(--md-base-c-dimmed)) !important; - font-weight: 500; -} - -/* Footer direction text (Previous/Next) */ -.md-footer__direction { - color: var(--bfc-base-2, var(--md-base-c-dimmed)) !important; - font-size: 0.8rem; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -/* Style social links in footer - position on the right */ -.md-footer__social { - display: flex; - justify-content: flex-end; - align-items: center; - margin-top: 0.5rem; -} - -.md-footer__social a { - color: var(--md-base-c-theme); - font-size: 18px; - margin-left: 12px; -} - -.md-footer__social a:hover { - color: var(--md-attn); -} - -/* Footer meta section - show but hide generator text */ -.md-footer-meta { - background-color: var(--md-base-3) !important; - color: var(--md-base-c-theme) !important; -} - -.md-footer-meta__inner { - background-color: var(--md-base-3) !important; - color: var(--md-base-c-theme) !important; -} - -/* Hide "Made with Material for MkDocs" generator text */ -.md-footer-meta .md-footer-copyright__highlight { - display: none !important; -} - -/* Footer copyright text - more specific selectors */ -.md-footer-meta .md-footer-copyright { - color: var(--md-base-c-theme) !important; -} - -.md-footer-meta .md-footer-copyright__highlight { - color: var(--md-base-c-theme) !important; -} - -.md-footer-meta .md-footer-copyright a { - color: var(--md-attn) !important; -} - -.md-footer-meta .md-footer-copyright a:hover { - color: var(--md-attn) !important; -} - -/* Override all text in footer meta */ -.md-footer-meta * { - color: var(--md-base-c-theme) !important; -} - -.md-footer-meta a { - color: var(--md-attn) !important; -} - -.md-footer-meta a:hover { - color: var(--md-attn) !important; -} - -/* Coming soon tags */ -.md-typeset em:contains("coming soon") { - background: var(--md-code-bg-color); - border-radius: 0.2rem; - padding: 0.1rem 0.3rem; - font-size: 0.85em; - font-style: normal; - color: var(--md-default-fg-color--light); -} - -/* Reduce spacing between heading and metadata */ -.md-typeset h1 + .article-meta { - margin-top: -0.7rem; -} - -/* Article metadata styling */ -.article-meta { - background-color: transparent; - border-top: 1px solid var(--md-default-fg-color--lightest); - border-bottom: 1px solid var(--md-default-fg-color--lightest); - border-left: none; - border-right: none; - border-radius: 0; - padding: 0.5rem 0; - margin: 0 0 1.5rem 0; - font-size: 0.75rem; - color: var(--md-default-fg-color--light); - line-height: 1.4; -} - -.article-meta .meta-item { - display: inline-block; - margin-right: 1rem; -} - -.article-meta .meta-item:last-child { - margin-right: 0; -} - -.article-meta .meta-label { - font-weight: 700; - color: var(--md-default-fg-color--light); -} - -.article-meta .meta-value { - color: var(--md-default-fg-color--light); -} - -.article-meta .meta-author { - color: var(--md-default-fg-color--light); - font-weight: normal; -} - -.article-meta .meta-date { - color: var(--md-default-fg-color--light); -} - -/* Responsive metadata */ -@media screen and (max-width: 768px) { - .article-meta .meta-item { - display: block; - margin-right: 0; - margin-bottom: 0.5rem; - } - - .article-meta .meta-item:last-child { - margin-bottom: 0; - } -} - -/* Responsive adjustments */ -@media screen and (max-width: 768px) { - .md-typeset .grid.cards { - grid-template-columns: 1fr; - } -} - -@media screen and (max-width: 76.2344em) { - .md-nav--primary .md-nav__title[for="__drawer"] { - background-color: var(--md-base-3-bg); - color: var(--md-base-c-theme); - } - - /* Show and style site title in mobile navigation drawer */ - .md-nav--primary .md-nav__title--site { - display: block !important; - background-color: var(--md-base-1); - padding: 1.5rem 1rem; - margin: 0; - border-bottom: 1px solid var(--md-default-fg-color--lightest); - text-align: center; - } - - /* Style the site title link and add logo */ - .md-nav--primary .md-nav__title--site .md-nav__button { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.5rem; - text-decoration: none; - color: var(--md-base-c-theme); - font-family: 'Satoshi', 'Open Sans', Arial, sans-serif; - font-feature-settings: "ss02", "ss03", "ss04", "liga" 0; - font-weight: 640; - font-size: 1.1rem; - } - - /* Add logo before site title in mobile nav */ - .md-nav--primary .md-nav__title--site .md-nav__button::before { - content: ""; - display: block; - width: 48px; - height: 48px; - background-image: url("../img/developer-platform-logo.svg"); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - margin-bottom: 0.25rem; - } -} - -/* Hide site name from desktop navigation and regular mobile title */ -.md-nav__title--site { - display: none; -} - -/* Hide the "Developer Platform Docs" section title above Home in navigation */ -.md-nav--primary .md-nav__title { - display: none !important; -} - -/* Keep the drawer toggle title visible */ -.md-nav--primary .md-nav__title[for="__drawer"]:not(.md-nav__title--site) { - display: block; -} - -/* Hide back buttons on desktop - they should only appear in mobile hamburger menu */ -@media screen and (min-width: 76.25em) { - .md-nav--primary .md-nav__back-button, - .md-nav--primary .md-nav__section-title { - display: none !important; - } -} - -/* Mobile navigation back button and section header styling */ -@media screen and (max-width: 76.2344em) { - /* Back button styling - clean and minimal */ - .md-nav--primary .md-nav__back-button { - margin: 0 !important; - padding: 0 !important; - background-color: var(--md-base-2) !important; - border-bottom: none !important; - } - - .md-nav--primary .md-nav__back-button .md-nav__link { - color: var(--md-base-c-theme) !important; - font-weight: 400 !important; - font-family: 'Open Sans', Arial, sans-serif !important; - background-color: transparent !important; - border-radius: 0 !important; - margin: 0 !important; - padding: 0.75rem 1.2rem !important; - transition: color 0.2s ease, background-color 0.2s ease; - text-decoration: none !important; - display: flex !important; - align-items: center !important; - justify-content: flex-start !important; - font-size: 0.75rem !important; - } - - .md-nav--primary .md-nav__back-button .md-nav__link:hover { - background-color: var(--md-default-fg-color--lightest) !important; - color: var(--md-base-c-theme) !important; - } - - .md-nav--primary .md-nav__back-button .md-nav__link:focus { - outline: 2px solid var(--md-chill); - outline-offset: -2px; - background-color: var(--md-default-fg-color--lightest) !important; - } - - /* Style the back arrow icon - smaller to match text */ - .md-nav--primary .md-nav__back-button svg { - width: 18px !important; - height: 18px !important; - margin-right: 0 !important; - opacity: 1; - transition: opacity 0.2s ease; - } - - .md-nav--primary .md-nav__back-button:hover svg { - opacity: 0.8; - } - - /* Section title styling - same size as navigation text */ - .md-nav--primary .md-nav__section-title { - margin: 0 !important; - padding: 0 !important; - background-color: var(--md-base-2) !important; - border-bottom: none !important; - border-top: none !important; - border: none !important; - } - - .md-nav--primary .md-nav__section-title-text { - color: var(--md-base-c-theme) !important; - font-weight: 500 !important; - font-size: 0.75rem !important; - padding: 0 1.2rem 0.75rem 1.2rem !important; - margin: 0 !important; - font-family: 'Open Sans', Arial, sans-serif !important; - text-transform: none !important; - letter-spacing: normal !important; - } - - /* Remove spacing adjustments */ - .md-nav--primary .md-nav__back-button + .md-nav__item, - .md-nav--primary .md-nav__section-title + .md-nav__item { - margin-top: 0 !important; - } - - /* Ensure proper background color for header area - no gap */ - .md-nav--primary .md-nav__back-button + .md-nav__section-title { - margin-top: 0 !important; - } - - /* Remove any borders from the header area completely */ - .md-nav--primary .md-nav__back-button *, - .md-nav--primary .md-nav__section-title *, - .md-nav--primary .md-nav__back-button::before, - .md-nav--primary .md-nav__back-button::after, - .md-nav--primary .md-nav__section-title::before, - .md-nav--primary .md-nav__section-title::after { - border: none !important; - border-bottom: none !important; - border-top: none !important; - } -} - -/* Breadcrumb styling */ -.breadcrumb-nav { - margin-bottom: 1.5rem; - font-size: 0.8rem; - color: var(--md-default-fg-color--light); -} - -.breadcrumb-home { - color: var(--md-attn) !important; - text-decoration: none; -} - -.breadcrumb-home:hover { - color: var(--md-attn) !important; - text-decoration: underline; -} - -/* Footer sizing and spacing - simple full width approach */ -.md-footer { - margin-top: 60px; - width: 100%; - max-width: none; -} - -/* Override Material theme's main container to not constrain footer */ -.md-main .md-footer { - width: 100vw; - position: relative; - left: 50%; - right: 50%; - margin-left: -50vw; - margin-right: -50vw; -} - -/* Footer navigation styling */ -.md-footer-nav { - background-color: var(--md-base-3); - width: 100%; - max-width: none; -} - -.md-footer-nav__inner { - padding: 40px 24px; - max-width: 1200px; - margin: 0 auto; - box-sizing: border-box; -} - -.md-footer-nav__link { - padding: 20px 16px; - min-height: 60px; -} - -/* Footer text sizes */ -.md-footer__link { - font-size: 24px; -} - -.md-footer__title { - font-size: 28px; - font-weight: 600; -} - -.md-footer__direction { - font-size: 18px; -} - -/* Footer meta section - full width background */ -.md-footer-meta { - background-color: var(--md-base-2); - width: 100%; - max-width: none; -} - -.md-footer-meta__inner { - padding: 20px 24px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - min-height: 77.9px; - max-width: 1200px; - margin: 0 auto; - box-sizing: border-box; -} - -.md-footer-meta__inner .md-footer-copyright { - flex: 1; -} - -.md-footer-meta__inner .md-footer__social { - margin-top: 0; -} - -/* Footer copyright text */ -.md-footer-meta, -.md-footer-meta .md-footer-copyright, -.md-footer-meta .md-footer-copyright__highlight, -.md-footer-copyright, -.md-footer-copyright__highlight, -.md-copyright, -.md-copyright__highlight { - font-size: 14px; - line-height: 1.4; - margin: 2px 0; -} - -.md-footer-meta * { - font-size: 14px; -} - -.md-footer-meta a { - color: var(--md-attn); - font-size: 14px; -} - -.md-footer-meta.md-typeset { - font-size: 14px; -} diff --git a/src/intility_bifrost_mkdocs/plugin.py b/src/intility_bifrost_mkdocs/plugin.py index 1c5814a..8591e52 100644 --- a/src/intility_bifrost_mkdocs/plugin.py +++ b/src/intility_bifrost_mkdocs/plugin.py @@ -212,11 +212,6 @@ def on_config(self, config: MkDocsConfig) -> MkDocsConfig: # Insert our overrides as the highest-priority theme directory. config.theme.dirs.insert(0, str(overrides_dir.resolve())) - # Inject extra.css so it gets a tag in every page. - config["extra_css"] = [ - "assets/stylesheets/extra.css", - ] + config["extra_css"] - # Inject sensible defaults (never overwrites user-provided config). _inject_markdown_extensions(config) _inject_theme_features(config) diff --git a/tests/test_plugin.py b/tests/test_plugin.py index d2c890f..8b19a16 100644 --- a/tests/test_plugin.py +++ b/tests/test_plugin.py @@ -29,9 +29,9 @@ def _minimal_config() -> MkDocsConfig: ) # Validation populates defaults (theme.dirs, extra_css, etc.) - errors, warnings = cfg.validate() + errors, _warnings = cfg.validate() assert not errors, errors - return cfg + return cfg # type: ignore # --------------------------------------------------------------------------- @@ -39,36 +39,36 @@ def _minimal_config() -> MkDocsConfig: # --------------------------------------------------------------------------- -def test_plugin_injects_overrides_and_css(): - """The plugin should prepend its overrides dir and extra.css into the config.""" +def test_plugin_injects_overrides_dir(): + """The plugin should prepend its overrides dir into the config.""" plugin = IntilityBifrostPlugin() config = _minimal_config() original_dirs_len = len(config.theme.dirs) - original_css = list(config["extra_css"]) result = plugin.on_config(config) - # Overrides dir is prepended (first entry = highest priority). overrides_dir = str(OVERRIDES_DIR.resolve()) assert result.theme.dirs[0] == overrides_dir assert len(result.theme.dirs) == original_dirs_len + 1 - # extra.css is prepended to extra_css. - assert result["extra_css"][0] == "assets/stylesheets/extra.css" - assert result["extra_css"][1:] == original_css - def test_overrides_directory_exists(): """The overrides directory should contain the expected theme files.""" assert OVERRIDES_DIR.is_dir() assert (OVERRIDES_DIR / "main.html").is_file() - assert (OVERRIDES_DIR / "assets" / "stylesheets" / "extra.css").is_file() assert (OVERRIDES_DIR / "assets" / "stylesheets" / "bifrost.css").is_file() - assert (OVERRIDES_DIR / "assets" / "fonts" / "satoshi-variable.woff2").is_file() - assert ( - OVERRIDES_DIR / "assets" / "fonts" / "satoshi-variable-italic.woff2" - ).is_file() + + +def test_plugin_does_not_inject_extra_css(): + """extra.css used to be auto-injected; ensure it no longer is.""" + plugin = IntilityBifrostPlugin() + config = _minimal_config() + + result = plugin.on_config(config) + + paths = [str(entry) for entry in result["extra_css"]] + assert "assets/stylesheets/extra.css" not in paths def test_plugin_preserves_existing_extra_css(): @@ -81,12 +81,8 @@ def test_plugin_preserves_existing_extra_css(): result = plugin.on_config(config) - assert result["extra_css"][0] == "assets/stylesheets/extra.css" assert "custom/user.css" in result["extra_css"] assert "custom/other.css" in result["extra_css"] - assert result["extra_css"].index("assets/stylesheets/extra.css") < result[ - "extra_css" - ].index("custom/user.css") # ---------------------------------------------------------------------------