xref: /aosp_15_r20/external/pigweed/docs/_static/css/pigweed.css (revision 61c4878ac05f98d0ceed94b57d316916de578985)

/*
 * Copyright 2024 The Pigweed Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

/********** General document and node styles ***********/
/* Note: The final value of color variables like --pw-color-background-code
 * is resolved when dark theme or light theme is chosen. */

:root {
  /* PyData Sphinx Theme variables. */
  /* When you move your mouse over a table, pydata highlights the row that
   * you're currently hovering over. Make this highlight color more muted. */
  --pst-color-table-row-hover-bg: var(--sd-color-primary-bg) !important;
  /* Pigweed variables. */
  --pw-font-body: "Noto Sans", sans-serif;
  --pw-font-code: "Roboto Mono", monospace;
  --pw-font-headings: "Lato", sans-serif;
  /* All nodes should always scroll instantly. */
  scroll-behavior: auto !important;
  --font-stack-monospace: var(--pw-font-code);
}

code {
  /* Remove borders from inline code (i.e. code that appears within
   * paragraphs. Note that code blocks should have borders; those are
   * applied to the code block's pre element. */
  border: none !important;
}

code, pre {
  background-color: var(--pw-color-background-code);
  color: var(--pw-color-foreground-primary);
  font-family: var(--pw-font-code);
}

div, li, p {
  font-family: var(--pw-font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pw-font-headings);
  font-weight: bold;
}

/* Highlighted lines in code blocks. */
.highlight .hll {
  /* Make highlighted code easier to read. */
  background-color: var(--color-code-hll-background) !important;
}

/********** Dark mode styles ***********/
/* https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/styling.html#color-variables */

html[data-theme="dark"] {
  /* PyData Sphinx Theme variables. */
  --pst-color-primary: #fb71fe;
  --pst-color-secondary: #8be9fd;
  /* Pigweed variables. */
  --pw-color-link: #2b8cee;
  --pw-color-link-inactive: #9ca0a5;
  --pw-color-background-primary: #1c2128;
  --pw-color-background-secondary: #22272e;
  --pw-color-background-code: #2d333b;
  --pw-color-foreground-primary: #ffffffcc;
  /* Doxygen/Breathe API reference customizations. */
  --color-api-function-border: #575757;
  --color-api-function-background: #2b2b2b;
  --color-api-class-background: #222c35;
  --color-api-class-foreground: #87c1e5;
  --color-api-class-border: #5288be;
  --color-code-hll-background: #ffc55140;
}

/********** Light mode styles ***********/
/* https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/styling.html#color-variables */

html[data-theme="light"] {
  /* PyData Sphinx Theme variables. */
  --pst-color-primary: #b529aa;
  --pst-color-secondary: #016074;
  /* Pigweed variables. */
  --pw-color-link: #2a5adf;
  --pw-color-link-inactive: #9ca0a5;
  --pw-color-background-primary: #ffffff;
  --pw-color-background-secondary: #f8f9fb;
  --pw-color-background-code: #f8f8f8;
  --pw-color-foreground-primary: ;
  /* Doxygen/Breathe API reference customizations. */
  --color-api-function-border: #cccccc;
  --color-api-function-background: #f0f0f0;
  --color-api-class-background: #e7f2fa;
  --color-api-class-foreground: #2980b9;
  --color-api-class-border: #6ab0de;
  --color-code-hll-background: #ffffcc;
}

/********** pydata customizations ***********/
/* These classes either come from our theme (pydata-sphinx-theme)
 * or Sphinx extensions that pydata relies on. */

/* Announcement banner. Only visible when an announcement is set in conf.py.
 * Is displayed at the very top of the page when enabled.
 * https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/announcements.html */
.bd-header-announcement {
  background-color: #00a100;
  font-family: var(--pw-font-body);
  font-style: italic;
  a {
    color: var(--pst-color-light);
    font-weight: bold;
  }
}

/* Header container at the top of every page that contains the logo,
 * top-level nav, search box, theme switcher, and social links. */
.bd-header {
  background-color: var(--pw-color-background-secondary) !important;
  font-family: var(--pw-font-headings);
  .logo__title {
    font-size: 1.25em;
    font-family: "Lato", sans-serif;
    font-weight: bold;
    font-style: italic;
    color: var(--pst-color-primary);
  }
  /* Top-level nav links. */
  .nav-item {
    color: var(--pw-color-link-inactive);
    /* On medium-width screens keep the text on a single row. */
    white-space: nowrap;
    /* The currently visible top-level section. */
    .active {
      color: var(--pst-color-primary);
    }
    :hover {
      color: var(--pst-color-secondary);
    }
  }
  .search-button__default-text {
    font-family: var(--pw-font-body);
  }
  /* Theme toggle button. */
  .theme-switch-button:hover {
    color: var(--pst-color-secondary);
  }
}

/* Search modal wrapper. The search modal is displayed after
 * focusing the search box in the header or pressing Ctrl+K. */
.search-button__search-container {
  /* Most of these tweaks are related to making our custom inline search
   * results container (.pw-search-results) display correctly. */
  background-color: var(--pst-color-background);
  flex-direction: column;
  height: 50vh;
  .bd-search {
    flex-grow: 0 !important;
  }
  /* Pigweed-custom search results container that we append
   * after the search modal input. Search results are populated
   * into this container. This enables you to see search results
   * immediately after typing rather than needing to press Enter
   * and go to the search results page.
   *
   * TODO: b/363034219 - Remove this custom code. */
  .pw-search-results {
    overflow-y: scroll;
    padding: 1em;
    a {
      color: var(--pw-color-link);
    }
  }
}

/* Container for the primary sidebar, main content,
 * and secondary sidebar. */
.bd-container {
  background-color: var(--pw-color-background-primary);
}

/* Breadcrumbs that appear above the main content. */
.bd-breadcrumbs {
  font-family: var(--pw-font-headings);
}

/* "Section Navigation" container that appears to the left of
 * the main content. */
.bd-sidebar-primary {
  background-color: var(--pw-color-background-primary);
  font-family: var(--pw-font-body);
  /* Hide the "Section Navigation" scrollbar. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  ::-webkit-scrollbar {
    display: none;
  }
}

/* Main content of the page. */
.bd-article {
  color: var(--pw-color-foreground-primary);
  /* Links */
  a.reference {
    color: var(--pw-color-link);
  }
  dd.field-odd {
    margin-inline-start: 0;
    padding-inline-start: 0;
  }
}

/* Container with "Previous" and "Next" links that appears at the
 * end of the main content. */
.prev-next-footer {
  .prev-next-title {
    color: var(--pw-color-link);
  }
}

/* "On this page" container that appears to the right of the main
 * content. */
.bd-sidebar-secondary {
  background-color: var(--pw-color-background-primary);
  font-family: var(--pw-font-body);
  /* Links to jump to sections on this page. */
  .nav-item {
    color: var(--pw-color-link-inactive);
    /* The currently visible section. */
    .active {
      color: var(--pst-color-primary);
    }
  }
}

/* Footer container at the very bottom of every page. */
.bd-footer {
  background-color: var(--pw-color-background-secondary);
  font-family: var(--pw-font-body);
  a {
    color: var(--pw-color-link);
  }
}

/********** sphinx-design component customizations ***********/
/* Sphinx Design provides common UI components like cards, tabs, etc.
 * https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/web-components.html */

/* Tab customizations.*/

.sd-tab-content {
  /* Tones down the border (the default is distracting). */
  border: 2px solid var(--pst-color-border) !important;
}

.sd-tab-label {
  /* Tones down the border (the default is distracting). */
  border-bottom: none !important;
  border-color: var(--pst-color-border) !important;
  border-width: 2px !important;
}

/* Card customizations. */

.sales-pitch-cta-primary {
  .sd-card-title {
    border-bottom: 3px solid var(--pst-color-primary);
    padding-bottom: 0.5rem;
  }
}

.sales-pitch-cta-secondary {
  .sd-card-title {
    border-bottom: 3px solid var(--pst-color-secondary);
    padding-bottom: 0.5rem;
  }
}

/********** Pigweed component customizations ***********/

/* Pigweed module cards styles. At the top of Pigweed module docs
 * we often display a card that displays metadata about the module,
 * e.g. tagline, supported languages, status of the module, etc.
 * See also: //pw_docgen/py/pw_docgen/sphinx/module_metadata.py */

.pw-topnav {
  background-color: var(--color-background-primary);
  padding: 0;
  width: 100%;
}

.pw-topnav-inline {
  display: flex;
  flex-direction: row;
  padding: 1em 0 0 0;
}

.pw-topnav-inline h1 {
  padding: 0;
  margin: 0;
}

.pw-topnav-title {
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1.25;
  padding: 0;
  margin: 0;
}

.pw-topnav-subtitle {
  display: block;
  font-size: larger;
  font-weight: bold;
  margin: 0.75em 0 0.5em 0;
  padding: 0;
}

.pw-text-center-align {
    text-align: center
}

.pw-module-section-nav-group {
  display: flex;
  margin: 0 1em;
  padding: 0;
}

.pw-module-section-nav-link {
  display: inline;
  list-style-type: none;
  margin: auto;
  padding: 0 1em;
}

.pw-module-section-nav-link p {
  display: inline;
  font-size: large;
}

/********** Doxygen/Breathe customizations ***********/
/* We use Doxygen and Breathe to auto-generate our C/C++
 * API references. The next styles tweak the auto-generated
 * HTML and CSS. */

/* TODO: b/364322974 - Re-tweak Doxygen/Breathe-related styles. */