webawesome/docs/assets/styles/docs.css

:root {
  --base-font-size: 16px;
  --base-font-weight: 400;
  --code-inline-background: rgba(0, 0, 0, 0.04);
  --code-tab-size: 2;
  --content-max-width: 58rem;
  --copycode-background: var(--sl-color-primary-50);
  --cover-background-blend-mode: ;
  --cover-background-color: var(--sl-color-gray-20);
  --cover-background-image: none;
  --heading-font-weight: 400;
  --link-color-hover: var(--sl-color-primary-50);
  --link-color: var(--sl-color-primary-50);
  --search-input-border-color: transparent;
  --search-input-background-color: var(--sl-color-white);
  --theme-hue: 180;
  --theme-saturation: 65%;

  --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: '•';
}

/** 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.125em 0.5em;
}

.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;
}

/* Code */

.markdown-section pre .token.comment {
  color: var(--sl-color-gray-70);
}

.markdown-section pre .token.string,
.markdown-section pre .token.attr-name,
.markdown-section pre .token.selector {
  color: var(--sl-color-success-40);
}

.markdown-section pre .token.keyword,
.markdown-section pre .token.tag,
.markdown-section pre .token.property {
  color: #b10dc9; /* purple */
}

.markdown-section pre .token.boolean,
.markdown-section pre .token.number {
  color: #f012be; /* fuschia */
}

.markdown-section pre .token.atrule,
.markdown-section pre .token.function,
.markdown-section pre .token.attr-value,
.markdown-section pre .token.value,
.markdown-section pre .token.class-name {
  color: var(--sl-color-warning-50);
}