mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-01 00:08:27 +01:00
63cd0d229e
This changes the darker end of the primary color scale to make it even darker. This means that at the lower end of the scale, white text also gets enough contrast to be accessible. For the record: these variables do not seem to be in use anywhere else in the code base (based on a text search), so it shouldn't affect any other bits or pieces.
157 lines
5.6 KiB
CSS
157 lines
5.6 KiB
CSS
/* stylelint-disable docusaurus/copyright-header */
|
|
/**
|
|
* Any CSS included here will be global. The classic template
|
|
* bundles Infima by default. Infima is a CSS framework designed to
|
|
* work well for content-centric websites.
|
|
*/
|
|
|
|
/* You can override the default Infima variables here. */
|
|
:root {
|
|
--unleash-color-purple: #635dc5;
|
|
--unleash-color-gray: #ecebeb;
|
|
|
|
--ifm-code-font-size: 90%;
|
|
--ifm-font-size-base: 15px;
|
|
--navbar-link-color: #122d33;
|
|
}
|
|
|
|
footer {
|
|
--ifm-footer-link-hover-color: var(--ifm-footer-link-color);
|
|
}
|
|
|
|
html[data-theme='light'] {
|
|
--ifm-color-primary: #39535b;
|
|
--ifm-color-primary-dark: #334b52;
|
|
--ifm-color-primary-darker: #30474d;
|
|
--ifm-color-primary-darkest: #283a40;
|
|
--ifm-color-primary-light: #3f5b64;
|
|
--ifm-color-primary-lighter: #425f69;
|
|
--ifm-color-primary-lightest: #4a6c76;
|
|
|
|
--ifm-link-color: var(--unleash-color-purple);
|
|
--ifm-menu-color-background-active: var(--unleash-color-gray);
|
|
--ifm-menu-color-background-hover: var(--unleash-color-gray);
|
|
|
|
--unleash-color-admonition-background: var(--unleash-color-gray);
|
|
--unleash-color-admonition-border: #999;
|
|
--unleash-color-admonition-text: #2b2b2b;
|
|
}
|
|
|
|
html[data-theme='dark'] {
|
|
--ifm-color-primary-lightest: #d1d1ff;
|
|
--ifm-color-primary-lighter: #c9c9ff;
|
|
--ifm-color-primary-light: #c2c0ff;
|
|
--ifm-color-primary: #bab8ff;
|
|
--ifm-color-primary-dark: #a09de4;
|
|
--ifm-color-primary-darker: #8582c9;
|
|
--ifm-color-primary-darkest: #6b67ae;
|
|
|
|
--unleash-color-purple: var(--ifm-color-primary);
|
|
--unleash-color-gray: #333;
|
|
--ifm-menu-color-background-active: var(--unleash-color-gray);
|
|
--ifm-menu-color-background-hover: var(--unleash-color-gray);
|
|
|
|
--ifm-link-color: var(--ifm-color-primary);
|
|
|
|
--unleash-color-admonition-background: var(
|
|
--ifm-color-secondary-contrast-background
|
|
);
|
|
|
|
--unleash-img-background-color: #fff;
|
|
|
|
--docsearch-primary-color: var(--ifm-color-primary-darkest);
|
|
}
|
|
|
|
main img {
|
|
background: var(--unleash-img-background-color);
|
|
display: block;
|
|
margin: auto;
|
|
border: var(--ifm-global-border-width) solid var(--unleash-color-gray);
|
|
border-radius: var(--ifm-global-radius);
|
|
box-shadow: var(--ifm-global-shadow-lw);
|
|
}
|
|
|
|
[class^='docTitle'] {
|
|
font-size: 2.5rem !important;
|
|
}
|
|
|
|
.navbar-sidebar__back {
|
|
/* hide the 'back to main menu' item in the narrow menu. */
|
|
display: none;
|
|
}
|
|
|
|
li.theme-doc-sidebar-item-category-level-1 > div::before {
|
|
width: 0.3em;
|
|
height: 100%;
|
|
content: ' ';
|
|
background-color: var(--unleash-color-purple);
|
|
border-radius: 2px;
|
|
position: absolute;
|
|
}
|
|
|
|
.docusaurus-highlight-code-line {
|
|
background-color: rgb(72, 77, 91);
|
|
display: block;
|
|
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
|
padding: 0 var(--ifm-pre-padding);
|
|
}
|
|
|
|
.header-github-link:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.header-github-link:before {
|
|
content: '';
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
|
no-repeat;
|
|
}
|
|
|
|
html[data-theme='dark'] .header-github-link:before {
|
|
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
|
no-repeat;
|
|
}
|
|
|
|
/* Video content container */
|
|
|
|
.unleash-video-container {
|
|
display: grid;
|
|
--gap: 0.5em;
|
|
--border-radius: var(--ifm-alert-border-radius);
|
|
gap: var(--gap);
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.unleash-video-container > .videos {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.unleash-video-container > .admonition {
|
|
box-shadow: none;
|
|
background-color: var(--unleash-color-admonition-background);
|
|
color: var(--unleash-color-admonition-text);
|
|
border-color: var(--unleash-color-admonition-border);
|
|
margin: 0;
|
|
}
|
|
|
|
.unleash-video-container iframe {
|
|
aspect-ratio: 16/9;
|
|
}
|
|
|
|
@media screen and (min-width: 450px) {
|
|
.unleash-video-container {
|
|
grid-template-columns: 1fr min(250px, 25%);
|
|
}
|
|
.unleash-video-container > .videos {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--gap);
|
|
}
|
|
}
|
|
|
|
/* end video content container */
|