include/mdguide.css

/**
 * @license
 * Copyright Google Inc.
 * SPDX-License-Identifier: Apache-2.0
 */

/* Custom styling used in GH pages generated from markdown files. */

:root {
  --goodcode-bg-color: #f8fff8;
  --badcode-bg-color: #fff8f8;
  --callout-important-border-color: #ad0303;
  --callout-important-fg-color: #ad0303;
  --callout-important-bg-color: #ffefe1;
  --callout-note-border-color: #1a6ebb;
  --callout-note-fg-color: #1a6ebb;
  --callout-note-bg-color: #e1f5fe;
  --callout-tip-border-color: #267769;
  --callout-tip-fg-color: #267769;
  --callout-tip-bg-color: #e0f2f1;
  --callout-warning-border-color: #a52714;
  --callout-warning-fg-color: #a52714;
  --callout-warning-bg-color: #fbe9e7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --goodcode-bg-color: #273322;
    --badcode-bg-color: #332822;
    --callout-important-bg-color: #eeded0;
    --callout-note-bg-color: #d0e4ed;
    --callout-tip-bg-color: #cfe1e0;
    --callout-warning-bg-color: #ead8d6;
  }
}

/* Mark "good" snippets in green. */
div.goodcode + div.highlighter-rouge pre.highlight {
  background-color: var(--goodcode-bg-color) !important;
  border: 1px green solid;
  position: relative;
}
div.goodcode + div.highlighter-rouge pre.highlight::before {
  color: green;
  content: '✅';
  position: absolute;
  right: 3px;
  top: 3px;
}

/* Mark "bad" snippets in red. */
div.badcode + div.highlighter-rouge pre.highlight {
  background-color: var(--badcode-bg-color) !important;
  border: 1px red solid;
  position: relative;
}
div.badcode + div.highlighter-rouge pre.highlight::before {
  color: red;
  content: '❌';
  position: absolute;
  right: 3px;
  top: 3px;
}

/*
 * Automatically number section titles.
 * These rules affect all headers if any opt-in to numbering. Ideally we'd use
 * :first-of-type to narrow the selection, but that doesn't seem to play well
 * with the ::before pseudo-element.
 */
div.markdown-body div.numbered ~ h1 {
  counter-reset: h2;
}

div.markdown-body div.numbered ~ h2 {
  counter-reset: h3;
}

div.markdown-body div.numbered ~ h3 {
  counter-reset: h4;
}

div.markdown-body div.numbered ~ h4 {
  counter-reset: h5;
}

div.markdown-body div.numbered ~ h2::before {
  content: counter(h2) ' ';
  counter-increment: h2;
}

div.markdown-body div.numbered ~ h3::before {
  content: counter(h2) '.' counter(h3) ' ';
  counter-increment: h3;
}

div.markdown-body div.numbered ~ h4::before {
  content: counter(h2) '.' counter(h3) '.' counter(h4) ' ';
  counter-increment: h4;
}

div.markdown-body div.numbered ~ h5::before {
  content: counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h5) ' ';
  counter-increment: h5;
}

/**
 * Internal callouts akin to GitHub alerts.
 * devtools/markdown/service/public/styles/markdown/callout.scss
 */

.callout-important {
  background-color: var(--callout-important-bg-color) !important;
  border-left-color: var(--callout-important-border-color) !important;
  color: var(--callout-important-fg-color) !important;
}

.callout-note {
  background-color: var(--callout-note-bg-color) !important;
  border-left-color: var(--callout-note-border-color) !important;
  color: var(--callout-note-fg-color) !important;
}

.callout-tip {
  background-color: var(--callout-tip-bg-color) !important;
  border-left-color: var(--callout-tip-border-color) !important;
  color: var(--callout-tip-fg-color) !important;
}

.callout-warning {
  background-color: var(--callout-warning-bg-color) !important;
  border-left-color: var(--callout-warning-border-color) !important;
  color: var(--callout-warning-fg-color) !important;
}

/* Hide the TOC title entry. */
#markdown-toc {
  padding-left: 0;
}
#markdown-toc > li::marker {
  content: '';
}
#markdown-toc > li > a {
  display: none;
}

/* The TOC can be quite long, so shrink it a little. */
#markdown-toc {
  font-size: smaller;
}

/* Only show TOC entries 2 levels deep. */
#markdown-toc > li > ul > li > ul > li > ul {
  display: none;
}