webawesome/docs/assets/styles/docs.css

:root {
  --theme-hue: var(--sl-color-primary-hue);
  --theme-saturation: var(--sl-color-primary-saturation);
  --mono-shade3: var(--sl-color-gray-20);
  --mono-shade2: var(--sl-color-gray-30);
  --mono-shade1: var(--sl-color-gray-40);
  --mono-base: var(--sl-color-gray-50);
  --mono-tint1: var(--sl-color-gray-70);
  --mono-tint2: var(--sl-color-gray-90);
  --mono-tint3: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 97.5%);

  --base-font-size: 16px;
  --base-font-weight: 400;
  --content-max-width: 58rem;
  --heading-font-weight: 400;
  --link-color-hover: var(--sl-color-primary-50);
  --link-color: var(--sl-color-primary-50);

  --sidebar-width: 18rem;
  --sidebar-background: var(--sl-color-white);
  --sidebar-border-color: var(--sl-color-gray-90);
  --sidebar-nav-link-before-content: '';
  --sidebar-padding: 0;
  --sidebar-toggle-background: var(--sidebar-background);
  --sidebar-toggle-border-color: var(--sidebar-border-color);
  --sidebar-toggle-border-width: 1px;
  --sidebar-nav-link-color--active: var(--sl-color-primary-50);
  --sidebar-nav-pagelink-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='11.2' viewBox='0 0 7 11.2'%3E%3Cpath d='M1.5 1.5l4 4.1 -4 4.1' stroke-width='1.5' stroke='rgb(179, 179, 179)' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --sidebar-nav-pagelink-background-image--active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.2' height='7' viewBox='0 0 11.2 7'%3E%3Cpath d='M1.5 1.5l4.1 4 4.1-4' stroke-width='1.5' stroke='rgb(179, 179, 179)' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --sidebar-nav-pagelink-background-image--loaded: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.2' height='7' viewBox='0 0 11.2 7'%3E%3Cpath d='M1.5 1.5l4.1 4 4.1-4' stroke-width='1.5' stroke='rgb(179, 179, 179)' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --sidebar-nav-pagelink-background-image--collapse: var(--sidebar-nav-pagelink-background-image);
  --sidebar-nav-link-before-content-l2: '';
  --sidebar-nav-link-before-content-l3: '•';

  --search-input-border-color: transparent;
  --search-input-background-color: var(--sl-color-white);

  --code-font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  --code-font-size: 14px;
  --code-inline-background: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 50%, 0.067);
  --code-tab-size: 2;
  --code-theme-background: var(--mono-tint3);
  --code-theme-text: var(--sl-color-gray-20);
  --code-theme-comment: var(--sl-color-gray-50);
  --code-theme-selection: var(--sl-color-primary-40);
  --code-theme-punctuation: var(--sl-color-gray-20);
  --code-theme-tag: var(--sl-color-primary-40);
  --code-theme-selector: #e98614;
  --code-theme-keyword: #a151d2;
  --code-theme-function: #e98614;
  --code-theme-operator: var(--sl-color-gray-20);
  --code-theme-variable: #f18c16;

  --copycode-background: var(--sl-color-primary-50);
  --copycode-color: var(--sl-color-white);

  --notice-important-background: var(--sl-color-danger-95);
  --notice-important-border-color: var(--sl-color-danger-50);

  --notice-tip-background: var(--sl-color-primary-95);
  --notice-tip-border-color: var(--sl-color-primary-50);
}

pre ::selection {
  color: white;
}

.docsify-copy-code-button {
  font-family: var(--base-font-family);
}

/** Badges */
.badge {
  font-size: var(--sl-font-size-x-small);
  font-weight: bold;
  text-transform: capitalize;
  color: var(--sl-color-white);
  background-color: var(--sl-color-gray-40);
  border-radius: 3px;
  padding: 0 0.33em;
}

.badge--ready {
  background-color: var(--sl-color-primary-50);
}

.badge--experimental {
  background: var(--sl-color-warning-50);
}

.badge--planned {
  background: var(--sl-color-info-50);
}

.badge--deprecated {
  background-color: var(--sl-color-danger-50);
}

/* Sidebar */
.sidebar .app-name,
.sidebar .search,
.sidebar .sidebar-nav {
  padding: 0 1.5rem;
}

.sidebar-toggle-button {
  border-left: solid 1px var(--sidebar-background) !important;
  margin-left: -1px;
}

.sidebar .search input[type='search'] {
  box-shadow: 0 0 0 var(--sl-focus-ring-width) transparent, inset 0 0 0 1px var(--sl-input-border-color);
  border-radius: 9999px;
  padding-right: 2.5rem;
  margin: 0 1.25rem;
  transition: var(--sl-transition-fast) box-shadow;
}

.sidebar .search input[type='search']:focus {
  box-shadow: var(--sl-focus-ring-box-shadow), inset 0 0 0 1px var(--sl-input-border-color-focus);
  outline: none;
}

.sidebar .clear-button {
  position: absolute;
  right: 1rem;
}

.sidebar .clear-button:focus {
  outline: none;
}

.sidebar-nav {
  flex: 1 1 auto;
}

.sidebar-nav > ul > li {
  font-weight: bold;
}

.sidebar-nav a {
  padding-left: 1rem !important;
}

/* Component headers */
.component-header {
  border-bottom: solid 1px var(--sl-color-gray-90);
  padding-bottom: 2rem;
  margin-top: -1rem;
  margin-bottom: 2rem;
}

.component-header__tag {
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0.75rem 0 0.25rem 0 !important;
}

.component-header__tag code {
  background: none !important;
  color: var(--sl-color-gray-50) !important;
  font-size: var(--sl-font-size-large);
  padding: 0 !important;
  margin: 0 !important;
}

.component-header__info {
  margin-bottom: 0.5rem;
}

/* Lead sentences that occur immediately after the header */
.component-header + p {
  font-size: var(--sl-font-size-x-large);
  line-height: 1.6;
}

/* In component pages we have:
 *
 * .component-header
 * p (leading sentence)
 * p (optional secondary sentence)
 * .code-block (main example)
 *
 * So if we have this structure, space out the code block a bit to make it appear on its own.
 */
.component-header + p + .code-block,
.component-header + p + p + .code-block {
  margin-top: 2.5rem;
}

/* Content */
.markdown-section table code {
  white-space: normal !important;
}