mirror of
https://github.com/renovatebot/renovate.git
synced 2026-10-25 15:01:49 +00:00
Jamie Tanna
f55b60a18b
To make sure this is more readable in our dark mode theme, we can add a dark variant, which is automagically shown. As it's an `<object>` not an `<img>`, we need to add a specific CSS rule, as we can't use Material for MkDocs' `img#only-light` or `img#only-dark`. This also requires that we set `color-scheme: and `background-color: transparent` to ensure that it blends into the background, otherwise we see white edges in dark mode. Co-authored-by: Claude Sonnet 5 <jamie.tanna+claude-code@mend.io>
70 lines
2.0 KiB
CSS
70 lines
2.0 KiB
CSS
/* Mend.io brand palette, used in place of Material's stock indigo theme */
|
|
[data-md-color-primary='custom'] {
|
|
--md-primary-fg-color: #073c8c;
|
|
--md-primary-fg-color--light: #308be3;
|
|
--md-primary-fg-color--dark: #073c8c;
|
|
--md-primary-bg-color: #ffffff;
|
|
--md-primary-bg-color--light: #e8effa;
|
|
}
|
|
|
|
[data-md-color-accent='custom'] {
|
|
--md-accent-fg-color: #308be3;
|
|
--md-accent-fg-color--transparent: #308be31a;
|
|
--md-accent-bg-color: #ffffff;
|
|
--md-accent-bg-color--light: #e8effa;
|
|
}
|
|
|
|
/*
|
|
* Text links inherit --md-primary-fg-color (#073c8c), which is navy-on-white
|
|
* in light mode but reads as low-contrast navy-on-near-black in dark mode.
|
|
* Material does the same lightening for its own dark primaries (e.g. indigo),
|
|
* so mirror that here with a lighter brand blue for dark mode only.
|
|
*/
|
|
[data-md-color-scheme='slate'][data-md-color-primary='custom'] {
|
|
--md-typeset-a-color: #5aa9f5;
|
|
}
|
|
|
|
.md-header .md-header__button.md-logo {
|
|
padding: 0;
|
|
}
|
|
.md-header .md-header__button.md-logo img,
|
|
.md-header .md-header__button.md-logo svg {
|
|
height: 1.5rem;
|
|
}
|
|
.md-typeset a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.md-typeset .parents {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
/** don't show the client-side rendered version number for Renovate (but keep the stars + forks) */
|
|
.md-source__fact .md-source__fact--version {
|
|
display: none;
|
|
}
|
|
|
|
/** Material only makes img/svg/video responsive by default, not object */
|
|
.md-typeset object.renovate-banner {
|
|
max-width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 756 / 250;
|
|
}
|
|
|
|
/*
|
|
* The banner is an <object> so its embedded links stay clickable, which
|
|
* rules out Material's img#only-light/#only-dark convention (that only
|
|
* targets <img> elements). Swap between two <object>s on the same
|
|
* data-md-color-scheme attribute that the rest of this file already uses.
|
|
*/
|
|
.md-typeset object.renovate-banner-dark {
|
|
display: none;
|
|
}
|
|
[data-md-color-scheme='slate'] .md-typeset object.renovate-banner-light {
|
|
display: none;
|
|
}
|
|
[data-md-color-scheme='slate'] .md-typeset object.renovate-banner-dark {
|
|
display: block;
|
|
}
|