website/src/css/custom.css - master - githubmirror/redux

website/src/css/custom.css
288 строк7 KB
Ahmed Hakeem
exclude menu and TOC items from the visited link styles for better UX (#4761)
16 дек 2024, 23:39
16 дек 2024, 23:392e65479
/**
 * 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 {
  --ifm-color-primary: #764abc;
  --ifm-color-primary-dark: #6a43a9;
  --ifm-color-primary-darker: #5e3b96;
  --ifm-color-primary-darkest: #533484;
  --ifm-color-primary-light: #845cc3;
  --ifm-color-primary-lighter: #916ec9;
  --ifm-color-primary-lightest: #9f80d0;

  --ifm-code-font-size: 95%;
  --ifm-code-border-radius: 3px;
  --ifm-code-background: rgba(27, 31, 35, 0.05);

  --ifm-blockquote-color: #ecf4f9;
  --ifm-blockquote-color-dark: #cbddea;
  --blockquote-text-color: var(--ifm-font-base-color);

  --ifm-code-padding-vertical: 0.1rem;
  --ifm-code-padding-horizontal: 0.2rem;
  --ifm-tabs-padding-vertical: 0.2rem;
  --ifm-tabs-padding-horizontal: 0.4rem;
  --ifm-pre-background: rgb(39, 40, 34);

  --ifm-color-content: black;
  --ifm-alert-color: black;

  --ra-admonition-color: #ecf4f9;
  --ra-admonition-color-dark: #2a98b9;

  --ra-admonition-color-important: #2a98b9;

  --ra-admonition-color-success: #f1fdf9;
  --ra-admonition-color-success-dark: #00bf88;

  --ra-admonition-color-caution: #fffbf5;
  --ra-admonition-color-caution-dark: #f0ad4e;

  --ra-admonition-color-error: #fff2f2;
  --ra-admonition-color-error-dark: #d9534f;

  --ra-admonition-icon-color: black !important;
}

@media screen and (max-width: 996px) {
  :root {
    --ifm-font-size-base: 15px;
  }
}
@media screen and (min-width: 997px) {
  :root {
    --ifm-font-size-base: 17px;
  }
}

:root[data-theme='dark'] {
  --ifm-color-primary: #ba8fff;
  --ifm-color-primary-dark: #7431ca;
  --ifm-color-primary-darker: #6d1cac;
  --ifm-color-primary-darkest: #730c9a;
  --ifm-color-primary-light: #b97cfd;
  --ifm-color-primary-lighter: #cc8ffc;
  --ifm-color-primary-lightest: #fcf2ff;
  --ifm-color-content: #c4c9ce; 
  --ifm-blockquote-color: #c4c9ce;
  --ifm-blockquote-color-dark: #6d1cac;
  --blockquote-text-color: black;
}

:root[data-theme='dark'] .hero.hero--primary {
  --ifm-hero-background-color: #593d88;
  --ifm-hero-text-color: #ffffff;
}

blockquote {
  color: var(--blockquote-text-color);
  background-color: var(--ifm-blockquote-color);
  border-left: 6px solid var(--ifm-blockquote-color-dark);
  border-radius: var(--ifm-global-radius);
}

.admonition a,
blockquote a {
  color: var(--ifm-color-primary-darkest);
  text-decoration: none;
}
.admonition a:hover,
blockquote a:hover {
  color: var(--blockquote-text-color);
}

.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding-top: 0;
  padding-bottom: 0;
  padding-left: calc(-0.25em + var(--ifm-pre-padding));
  padding-right: var(--ifm-pre-padding);
  border-left: 0.25em solid #1976d2;
}

div[class*='codeBlockTitle'] {
  padding: 0.15rem var(--ifm-pre-padding);
}

:root[data-theme='dark'] .admonition code {
  color: var(--ifm-blockquote-color);
}

:root[data-theme='dark'] blockquote code {
  color: var(--ifm-blockquote-color);
}

code {
  background-color: var(--ifm-color-emphasis-300);
  border-radius: 0.2rem;
  color: var(--ifm-color-content);
}

a code,
code a {
  background-color: var(--ifm-color-emphasis-200);
  color: inherit;
}

a.contents__link > code {
  color: inherit;
}

a.contents__link.contents__link--active {
  font-weight: 600;
}

a:visited:not(.menu__link, .table-of-contents__link, .navbar__link:not([target="_blank"])) {
  color: var(--ifm-color-primary);
}

.navbar .navbar__inner {
  flex-wrap: nowrap;
}

.navbar .navbar__items {
  flex: 1 1 auto;
}

.footer__logo {
  width: 50px;
  height: 50px;
}

.menu__link {
  font-weight: normal;
}

.menu__link--sublist {
  color: var(--ifm-font-base-color) !important;
  font-weight: var(--ifm-font-weight-semibold);
}

.menu .menu__link.menu__link--sublist:after {
  transform: rotateZ(180deg);
  -webkit-transition: -webkit-transform 0.2s linear;
  transition: -webkit-transform 0.2s linear;
  transition-property:
    transform,
    -webkit-transform;
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: linear, linear;
  transition-delay: 0s, 0s;
  transition: transform 0.2s linear;
  transition:
    transform 0.2s linear,
    -webkit-transform 0.2s linear;
}

.menu .menu__list-item.menu__list-item--collapsed .menu__link--sublist:after {
  transform: rotateZ(90deg);
}

.codesandbox {
  width: 100%;
  height: 500px;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
}

.style-guide details,
details.detailed-explanation {
  background-color: var(--ifm-blockquote-color);
  color: var(--blockquote-text-color);
  margin: 0.25rem 0;
  padding: 0.5rem 0.5rem;
  border-radius: var(--ifm-global-radius);
}

.style-guide details h4,
details.detailed-explanation h4 {
  color: var(--blockquote-text-color);
}

.style-guide details summary,
details.detailed-explanation summary {
  cursor: pointer;
}

.style-guide details summary h4,
details.detailed-explanation summary h4 {
  display: inline;
}

.style-guide details p,
details.detailed-explanation p {
  margin-bottom: 0;
  margin-bottom: calc(var(--ifm-paragraph-margin-bottom) / 2);
}

.style-guide .priority-rules h3:after {
  margin-left: 1em;
  font-size: 0.7em;
  position: absolute;
}

.style-guide .priority-essential h3:after {
  content: 'ESSENTIAL';
  color: var(--ifm-color-danger);
  position: relative;
}

.style-guide .priority-stronglyrecommended h3:after {
  content: 'STRONGLY RECOMMENDED';
  color: var(--ifm-color-warning);
  position: relative;
}

.style-guide .priority-recommended h3:after {
  content: 'RECOMMENDED';
  color: var(--ifm-color-info);
  position: relative;
}

.admonition {
  color: black;
  border-radius: var(--ifm-global-radius);
  border-left: 6px solid var(--ra-admonition-color-dark);
}

.admonition.admonition-note,
.admonition.admonition-info,
.admonition.admonition-important,
.admonition.admonition-secondary {
  --ra-admonition-color: #ecf4f9;
  background-color: var(--ra-admonition-color);
}

.admonition.admonition-success,
.admonition.admonition-tip {
  background-color: var(--ra-admonition-color-success);
  border-left-color: var(--ra-admonition-color-success-dark);
}

.admonition.admonition-caution {
  background-color: var(--ra-admonition-color-caution);
  border-left-color: var(--ra-admonition-color-caution-dark);
}

.admonition.admonition-warning,
.admonition.admonition-danger {
  background-color: var(--ra-admonition-color-error);
  border-left-color: var(--ra-admonition-color-error-dark);
}

.admonition .admonition-icon svg {
  fill: black;
  stroke: black;
}

/* course callout on home page */
.course-callout.home-mid {
  max-width: 900px;
  margin: 1rem auto 2rem;
}