handbook.css

@charset "UTF-8";
body {
  background: #FCFCFC;
  position: relative;
  margin: 0px; }

body article {
  font-family: 'Segoe UI Semilight', Tahoma, Geneva, Verdana, sans-serif;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.3em; }

@media (min-width: 800px) {
  body article {
    max-width: 65em; } }

div.theme-selector {
  font-family: 'Segoe UI Semilight', Tahoma, Geneva, Verdana, sans-serif;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  border-radius: 0px 0px 0px 8px;
  right: 0px;
  top: 0px;
  background: #777;
  width: fit-content;
  color: white;
  position: absolute; }
  @media (min-width: 1400px) {
    div.theme-selector {
      position: fixed; } }
  div.theme-selector div {
    display: inline-block;
    font-size: 160%;
    width: 1.3em;
    height: 1.3em;
    border-radius: 6px;
    text-align: center;
    cursor: pointer; }
  div.theme-selector #set-theme-light {
    color: white;
    background: white; }
  div.theme-selector #set-theme-dark {
    color: black;
    background: black; }
  div.theme-selector #set-theme-light-dark {
    background: white;
    color: black; }
  div.theme-selector #set-theme-dark-light {
    background: black;
    color: white; }

article :not(pre) code {
  font-family: Consolas, Menlo, Monaco, Deja Vu Sans Mono, "Courier New", monospace; }

article {
  padding-top: 1em; }
  article h1, article h2, article h3, article h4, article h5, article h6 {
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
  article h1 {
    font-size: 170%; }
  article h2 {
    margin-top: 1.8em; }
  article h3 {
    margin-top: 1.6em; }

pre.typescript-code {
  font-family: Consolas, Menlo, Monaco, Deja Vu Sans Mono, "Courier New", monospace;
  font-size: 100%;
  display: block;
  position: relative;
  max-width: 80em;
  width: 90%;
  padding: 0.8em;
  padding-left: 1.6em;
  padding-right: 4em;
  border: solid #777 1px;
  line-height: 1.45em;
  min-width: 30em;
  border-radius: 8px;
  box-shadow: 0px 0px 8px #00000020; }

span.quickinfo-result {
  cursor: help;
  position: relative;
  display: inline-block;
  background: white;
  padding: 3px 10px 3px 8px;
  border: solid #AAAACC 1px;
  left: 0.2em;
  box-shadow: 0px 0px 3px #00000033;
  /*
     * Disallow user-selection on quick-info.
     * This allows users to copy/paste examples without the quick info contents.
     * Ideally, we'd still allow users to select within a quick info bubble separately.
     */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

span.quickinfo-arrow {
  color: #AAAACC;
  position: absolute;
  top: -0.75em;
  left: -0.3em; }

span.error {
  position: relative; }

span.error-highlight {
  background: #FF000010;
  border-radius: 0.4em;
  border-bottom: #F44 2px;
  border-bottom-style: dotted;
  position: absolute;
  display: inline-block;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -5px; }

.error-tooltip {
  display: block;
  opacity: 0;
  margin: 0;
  font-family: Consolas, Menlo, Monaco, Deja Vu Sans Mono, "Courier New", monospace;
  padding: 3px 10px 3px 8px;
  border: solid #AAAACC 1px;
  box-shadow: 0px 0px 3px #00000033;
  position: absolute;
  visibility: hidden;
  top: 1.5225em;
  left: 0px;
  transition-property: opacity;
  transition-duration: 0.25s; }

.error:hover > .error-tooltip, .error:focus > .error-tooltip {
  visibility: visible;
  opacity: 1;
  z-index: 1; }

.dark .error-tooltip, .light-dark .error-tooltip {
  background: #222;
  color: #E4E4E4; }

.light .error-tooltip, .dark-light .error-tooltip {
  background: #FFF;
  color: #000; }

span.highlight {
  position: relative; }

span.highlight-content {
  background: #FFFF0040;
  position: absolute;
  display: inline-block;
  top: -3px;
  left: -1px;
  right: -1px;
  bottom: -3px;
  border-radius: 6px;
  box-shadow: 0px 0px 6px #00000088; }

span.highlight-description {
  display: none; }

div.indent {
  display: inline-block;
  width: 1.1em; }

div.indent::before {
  content: "→";
  color: #BBB; }

a, a:visited, a:active, a:hover {
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

span.toc-title {
  font-weight: bold;
  border-bottom: solid 1px gray; }

ul {
  padding-left: 0em; }

ul ul, ul ul ul {
  margin-left: 1.3em; }

h1 a, h2 a, h3 a, h4 a {
  text-decoration: none;
  position: relative; }

h1 a:hover::before, h2 a:hover::before, h3 a:hover::before, h4 a:hover::before {
  content: "#";
  position: absolute;
  left: -0.7em; }

hr.error-divider {
  margin-left: -1em;
  margin-right: -3em;
  margin-top: 0.75em;
  margin-bottom: 0.75em; }

div.listed-error, div.error-line {
  word-wrap: normal;
  overflow-wrap: normal; }

blockquote {
  margin: 1em;
  padding: 0.02em 1em 0.02em 1em; }

aside {
  width: fit-content;
  margin-left: 0.5em;
  padding: 0.4em;
  padding-left: 1em;
  padding-right: 1em;
  border-radius: 12px; }

body.dark pre.typescript-code, body.light-dark pre.typescript-code {
  background: #111;
  color: #D4D4D4; }
  body.dark pre.typescript-code .tm-cmt, body.light-dark pre.typescript-code .tm-cmt {
    color: #608B4E; }
  body.dark pre.typescript-code .tm-kw, body.light-dark pre.typescript-code .tm-kw {
    color: #569CD6; }
  body.dark pre.typescript-code .tm-def, body.light-dark pre.typescript-code .tm-def {
    color: #D4D4D4; }
  body.dark pre.typescript-code .tm-typ, body.light-dark pre.typescript-code .tm-typ {
    color: #4EC9B0; }
  body.dark pre.typescript-code .tm-vr, body.light-dark pre.typescript-code .tm-vr {
    color: #9CDCFE; }
  body.dark pre.typescript-code .tm-str, body.light-dark pre.typescript-code .tm-str {
    color: #CE9178; }
  body.dark pre.typescript-code .tm-mth, body.light-dark pre.typescript-code .tm-mth {
    color: #DCDCAA; }
  body.dark pre.typescript-code .tm-num, body.light-dark pre.typescript-code .tm-num {
    color: #B5CEA8; }
  body.dark pre.typescript-code .punctuation, body.dark pre.typescript-code .operator, body.dark pre.typescript-code .text, body.dark pre.typescript-code .localName, body.dark pre.typescript-code .propertyName, body.dark pre.typescript-code .methodName, body.dark pre.typescript-code .parameterName, body.light-dark pre.typescript-code .punctuation, body.light-dark pre.typescript-code .operator, body.light-dark pre.typescript-code .text, body.light-dark pre.typescript-code .localName, body.light-dark pre.typescript-code .propertyName, body.light-dark pre.typescript-code .methodName, body.light-dark pre.typescript-code .parameterName {
    color: #D4D4D4; }
  body.dark pre.typescript-code .keyword, body.light-dark pre.typescript-code .keyword {
    color: #569CD6; }
  body.dark pre.typescript-code .className, body.dark pre.typescript-code .typeParameterName, body.dark pre.typescript-code .interfaceName, body.dark pre.typescript-code .aliasName, body.light-dark pre.typescript-code .className, body.light-dark pre.typescript-code .typeParameterName, body.light-dark pre.typescript-code .interfaceName, body.light-dark pre.typescript-code .aliasName {
    color: #4EC9B0; }
  body.dark pre.typescript-code .stringLiteral, body.light-dark pre.typescript-code .stringLiteral {
    color: #CE9178; }
  body.dark pre.typescript-code span.quickinfo-result, body.light-dark pre.typescript-code span.quickinfo-result {
    background: #222; }

body.dark div.listed-error, body.light-dark div.listed-error {
  color: #D4D4D4; }

body.light pre.typescript-code, body.dark-light pre.typescript-code {
  background: #FFF;
  color: #000000;
  /**
        * Colors from our own classifier
        */ }
  body.light pre.typescript-code .tm-cmt, body.dark-light pre.typescript-code .tm-cmt {
    color: #008000; }
  body.light pre.typescript-code .tm-kw, body.dark-light pre.typescript-code .tm-kw {
    color: #0000FF; }
  body.light pre.typescript-code .tm-def, body.dark-light pre.typescript-code .tm-def {
    color: #000000; }
  body.light pre.typescript-code .tm-typ, body.dark-light pre.typescript-code .tm-typ {
    color: #267F99; }
  body.light pre.typescript-code .tm-vr, body.dark-light pre.typescript-code .tm-vr {
    color: #001080; }
  body.light pre.typescript-code .tm-str, body.dark-light pre.typescript-code .tm-str {
    color: #A31515; }
  body.light pre.typescript-code .tm-mth, body.dark-light pre.typescript-code .tm-mth {
    color: #795E26; }
  body.light pre.typescript-code .tm-num, body.dark-light pre.typescript-code .tm-num {
    color: #09885A; }
  body.light pre.typescript-code .punctuation, body.light pre.typescript-code .operator, body.light pre.typescript-code .text, body.light pre.typescript-code .localName, body.light pre.typescript-code .propertyName, body.light pre.typescript-code .methodName, body.light pre.typescript-code .parameterName, body.dark-light pre.typescript-code .punctuation, body.dark-light pre.typescript-code .operator, body.dark-light pre.typescript-code .text, body.dark-light pre.typescript-code .localName, body.dark-light pre.typescript-code .propertyName, body.dark-light pre.typescript-code .methodName, body.dark-light pre.typescript-code .parameterName {
    color: #000000; }
  body.light pre.typescript-code .keyword, body.dark-light pre.typescript-code .keyword {
    color: #0000FF; }
  body.light pre.typescript-code .className, body.light pre.typescript-code .typeParameterName, body.light pre.typescript-code .interfaceName, body.light pre.typescript-code .aliasName, body.dark-light pre.typescript-code .className, body.dark-light pre.typescript-code .typeParameterName, body.dark-light pre.typescript-code .interfaceName, body.dark-light pre.typescript-code .aliasName {
    color: #267F99; }
  body.light pre.typescript-code .stringLiteral, body.dark-light pre.typescript-code .stringLiteral {
    color: #A31515; }
  body.light pre.typescript-code span.quickinfo-result, body.dark-light pre.typescript-code span.quickinfo-result {
    background: #f5f5f5; }

body.light div.listed-error, body.dark-light div.listed-error {
  color: #000000; }

body.dark, body.dark-light {
  background: #222;
  color: #E4E4E4; }
  body.dark a, body.dark a:hover, body.dark a:visited, body.dark a:active, body.dark-light a, body.dark-light a:hover, body.dark-light a:visited, body.dark-light a:active {
    color: #FFD; }
  body.dark h1 a, body.dark h1 a:visited, body.dark h1 a:active, body.dark h1 a:hover, body.dark h2 a, body.dark h2 a:visited, body.dark h2 a:active, body.dark h2 a:hover, body.dark h3 a, body.dark h3 a:visited, body.dark h3 a:active, body.dark h3 a:hover, body.dark h4 a, body.dark h4 a:visited, body.dark h4 a:active, body.dark h4 a:hover, body.dark-light h1 a, body.dark-light h1 a:visited, body.dark-light h1 a:active, body.dark-light h1 a:hover, body.dark-light h2 a, body.dark-light h2 a:visited, body.dark-light h2 a:active, body.dark-light h2 a:hover, body.dark-light h3 a, body.dark-light h3 a:visited, body.dark-light h3 a:active, body.dark-light h3 a:hover, body.dark-light h4 a, body.dark-light h4 a:visited, body.dark-light h4 a:active, body.dark-light h4 a:hover {
    color: #EEE; }
  body.dark aside, body.dark-light aside {
    background: #444;
    border: solid #999 3px; }
  body.dark blockquote, body.dark-light blockquote {
    background: #224;
    border-left: solid #446 4px; }
  body.dark article :not(pre) code, body.dark-light article :not(pre) code {
    color: #F37575; }

body.light, body.light-dark {
  background: #FFF;
  color: #000; }
  body.light a, body.light a:visited, body.light a:active, body.light a:hover, body.light-dark a, body.light-dark a:visited, body.light-dark a:active, body.light-dark a:hover {
    color: #265988; }
  body.light h1 a, body.light h1 a:visited, body.light h1 a:active, body.light h1 a:hover, body.light h2 a, body.light h2 a:visited, body.light h2 a:active, body.light h2 a:hover, body.light h3 a, body.light h3 a:visited, body.light h3 a:active, body.light h3 a:hover, body.light h4 a, body.light h4 a:visited, body.light h4 a:active, body.light h4 a:hover, body.light-dark h1 a, body.light-dark h1 a:visited, body.light-dark h1 a:active, body.light-dark h1 a:hover, body.light-dark h2 a, body.light-dark h2 a:visited, body.light-dark h2 a:active, body.light-dark h2 a:hover, body.light-dark h3 a, body.light-dark h3 a:visited, body.light-dark h3 a:active, body.light-dark h3 a:hover, body.light-dark h4 a, body.light-dark h4 a:visited, body.light-dark h4 a:active, body.light-dark h4 a:hover {
    color: #000; }
  body.light aside, body.light-dark aside {
    background: #EEEEFF;
    border: solid #33338855 3px; }
  body.light blockquote, body.light-dark blockquote {
    background: #FFFFF0;
    border-left: solid #EEB 4px; }
  body.light article :not(pre) code, body.light-dark article :not(pre) code {
    color: #a31515; }

body.light a.playground-link, body.light-dark a.playground-link, body.dark-light a.playground-link, body.dark a.playground-link {
  font-family: "wf_segoe-ui_normal", Verdana, Geneva, Tahoma, sans-serif;
  position: absolute;
  font-size: 12px;
  bottom: 0px;
  right: 0px;
  padding: 6px;
  background-color: #0074c1;
  border-top-left-radius: 7px;
  border-bottom-right-radius: 7px; }

body.light a.playground-link, body.light a.playground-link:visited, body.light-dark a.playground-link, body.light-dark a.playground-link:visited, body.dark-light a.playground-link, body.dark-light a.playground-link:visited, body.dark a.playground-link, body.dark a.playground-link:visited {
  color: #FFF;
  text-decoration: none; }