neotoc/dist/base-plain.css.map

Neotoc is a smoothly animated, foldable table of contents generator.

{"version":3,"mappings":"AAmBA,iWAiCA,gEAIE,oEAIA,sDAKA,wDAGA,8DAGA,+DAOF,4NAWA,uGAIE,8FAKA,gDAMF,2CAEE,mDAMF,iEAIA,kMAYA,2HAQA,sEAGE,oFAGE,8CAMJ,yIAKA,qEAGA,uEAIA,qFAIA,wGAIA,sIAAA,uIAAA,uIAAA,uIAAA,uIAaA,wEAIA,wDAIA,qDAKA,iCAIA,kOASE,yBAKF,8CAIA,gDAIA,iJAMA,yDAKA,6CAIA,8CAIA,8CAIA,+CAIA,gDAMA,+KAUA,oFAQA,yDAMA,0IAQE,0DAOF,2EAIA,6EAIA,qHAQA,oMASA,6LAWA,mOAWA,6DAIA,mEAIA,+GAQA,0IAWA,uFAKA,uFAMA,mEAKA,0FAKA,6FAIA,gHAMA,8IAAA,+IAAA,+IAAA,+IAAA,+IAaA,gFAMA,wBAIA","sources":["../src/styles/base-plain.css"],"sourcesContent":["/* On this Stylesheet :)\n  ===================\n  - DEFAULT THEME SETTINGS\n  - NEOTOC STYLE\n   - FOUNDATION\n   - HEADER\n   - LIGHT BAR\n   - TOP AND BOTTOM SHADOWS\n   - ACCESSIBILITY\n   - UTILITY CLASSES\n   - UNUSED CLASSES\n\n  Syntax of heading comments:\n  - They are capitalized.\n  - No extra asterisks denote top level heading comments. Additional asterisks denote nesting levels.\n*/\n\n/* DEFAULT THEME SETTINGS */\n/** COLORS **/\n.nt-widget {\n  --light-bar: currentColor;\n  --light-opacity: 0.1;\n  /* See https://neotoc.vercel.app/docs#colors to learn about other color variables */\n}\n\n/** SIZES AND DURATION **/\n.nt-widget {\n  --body-height: 400px;\n  --relative-font-size: 100; /* do not use percentage sign */\n  --toggle-fold-btn-width: 1.7em; /* should in em unit */\n  --indent-line-gap: 0px; /* should be in px unit */\n  --indent-line-width: 1px;\n  --anchor-padding-block: 0.4em;\n  --anchor-padding-inline: 0.3em;\n  --anchor-border-radius: 0px;\n  --padding-left: 1rem;\n  --light-bar-width: 4px;\n  /* `--light-bar-tip-radius` is not used in base-plain */\n  --light-spread-length: 100vw;\n  --folding-duration: 0.3s;\n}\n\n/* NEOTOC STYLE */\n/*\n Following are my recommended styles for Neotoc.\n Not using or changing some of them will break the design,\n while others are just stylistic preferences. Feel free\n to make changes for advanced customization.\n*/\n\n/** FOUNDATION **/\n\n.nt-widget {\n  background: var(--bg);\n  font-size: 0.96em;\n  line-height: 1.5;\n  * {\n    box-sizing: border-box;\n    transition: background-color 0.15s;\n  }\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin: 0;\n  }\n  li {\n    border-radius: var(--anchor-border-radius);\n  }\n  li li {\n    font-size: calc(var(--relative-font-size) * 1%);\n  }\n  svg {\n    display: inline;\n    vertical-align: middle;\n    width: 100%;\n  }\n}\n\n.nt-body {\n  padding-left: var(--padding-left);\n  padding-block: 0.5rem;\n  padding-right: 0.5rem;\n  max-height: var(--body-height);\n  transition: max-height 0.15s;\n  overflow-y: auto;\n  overflow-x: hidden;\n  overscroll-behavior: contain;\n}\n\n.nt-foldable {\n  display: grid;\n  transition: grid-template-rows var(--folding-duration);\n  grid-template-rows: 1fr;\n  ul {\n    transition:\n      opacity var(--folding-duration),\n      visibility var(--folding-duration);\n  }\n  > ul {\n    overflow: clip;\n    grid-row: 1 / span 2;\n  }\n}\n\n.nt-foldable-folded {\n  grid-template-rows: 0fr;\n  ul {\n    visibility: hidden;\n    opacity: 0;\n  }\n}\n\n.nt-non-foldable:has(> .nt-fold-indicator-line) {\n  position: relative;\n}\n\n.nt-fold-indicator-line {\n  margin: 0;\n  width: 100%;\n  border: none;\n  border-top: 1px solid var(--fold-indicator-line);\n  position: absolute;\n  bottom: 0px;\n  z-index: 2;\n  transition: opacity var(--folding-duration);\n  opacity: 0;\n}\n\n.nt-toggle-fold-btn,\n.nt-unfoldable-icon {\n  color: var(--fg);\n  grid-column: -3;\n  padding-block: var(--anchor-padding-block);\n  z-index: 1; /* to keep them above anchor and below the light bar's light */\n}\n\n.nt-toggle-fold-btn {\n  padding-inline: 1px;\n  cursor: pointer;\n  svg {\n    transition: transform var(--folding-duration);\n    font-size: 0.8em;\n    path {\n      stroke-width: 2px;\n    }\n  }\n}\n\n.nt-toggle-fold-btn:first-child {\n  border-top-left-radius: var(--anchor-border-radius);\n  border-bottom-left-radius: var(--anchor-border-radius);\n}\n\n.nt-toggle-fold-btn:hover {\n  background: var(--bg-toggle-fold-btn-hover);\n}\n.nt-toggle-fold-btn:active {\n  background: var(--bg-toggle-fold-btn-active);\n}\n\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn:hover) {\n  background: var(--bg-sub-anchors);\n}\n\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn:hover) > .nt-foldable .nt-a {\n  background: var(--bg-sub-anchors);\n}\n\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn.nt-level-1:hover)\n  .nt-indent-block:nth-child(1),\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn.nt-level-2:hover)\n  .nt-indent-block:nth-child(2),\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn.nt-level-3:hover)\n  .nt-indent-block:nth-child(3),\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn.nt-level-4:hover)\n  .nt-indent-block:nth-child(4),\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn.nt-level-5:hover)\n  .nt-indent-block:nth-child(5) {\n  border-color: var(--indent-line-highlight);\n}\n\n.nt-toggle-fold-btn:hover + .nt-a {\n  background-color: var(--bg-anchor-hover);\n}\n\n.nt-toggle-fold-btn-folded svg {\n  transform: rotate(-90deg);\n}\n\n.nt-non-foldable {\n  display: grid;\n  grid-template-rows: 1fr;\n}\n\n.nt-non-foldable > * {\n  grid-row: 1 / -1;\n}\n\n.nt-a {\n  background: var(--bg);\n  color: var(--fg);\n  text-decoration: none;\n  padding-block: var(--anchor-padding-block);\n  padding-right: var(--anchor-padding-inline);\n  border-radius: var(--anchor-border-radius);\n  align-self: center;\n  grid-column: 1 / -1;\n  code {\n    font-size: 1em;\n  }\n}\n\n.nt-a:hover {\n  background: var(--bg-anchor-hover);\n}\n\n.nt-a:active {\n  background: var(--bg-anchor-active);\n}\n\n.nt-indent-block {\n  transition: border-right calc(var(--folding-duration) / 2);\n  border-right: var(--indent-line-width) solid var(--indent-line);\n  z-index: 1;\n}\n\n.nt-indent-block,\n.nt-unfoldable-icon {\n  pointer-events: none;\n}\n\n.nt-indent-block:first-child {\n  grid-column: 1 / 2;\n}\n\n.nt-indent-block:nth-child(2) {\n  grid-column: 2 / 4;\n}\n\n.nt-indent-block:nth-child(3) {\n  grid-column: 4 / 7;\n}\n\n.nt-indent-block:nth-child(4) {\n  grid-column: 7 / 10;\n}\n\n.nt-indent-block:nth-child(5) {\n  grid-column: 10 / 13;\n}\n\n/** HEADER **/\n\n.nt-header {\n  display: flex;\n  padding-right: 0.5rem;\n  padding-left: var(--padding-left);\n  justify-content: space-between;\n  gap: 8px;\n  align-items: flex-end;\n  padding-block: 0.5rem;\n}\n\n.nt-title {\n  color: var(--fg);\n  font-size: 1.1em;\n  font-weight: 600;\n  margin: 0;\n  flex-shrink: 1000;\n}\n\n.nt-btn-group {\n  display: flex;\n  flex-shrink: 1;\n  overflow: hidden; /* easy fix for perfect rounded corner */\n}\n\n.nt-header-btn {\n  font: inherit; /* for consistent button size across all browsers */\n  color: var(--fg);\n  background: var(--bg-header-btn);\n  box-sizing: content-box;\n  padding: 5px;\n  border: none;\n  cursor: pointer;\n  svg {\n    height: 1.4em;\n    width: 1.4em;\n    display: block;\n  }\n}\n\n.nt-header-btn:not([disabled]):hover {\n  background: var(--bg-header-btn-hover);\n}\n\n.nt-header-btn:not([disabled]):active {\n  background: var(--bg-header-btn-active);\n}\n\n.nt-header-btn[disabled] {\n  color: var(--fg-header-btn-disabled);\n  background: var(--bg-header-btn-disabled);\n  cursor: default;\n}\n\n/** LIGHT BAR **/\n\n.nt-light-bar {\n  --terminal-side-length: var(--light-bar-width);\n  background: var(--light-bar);\n  width: var(--light-bar-width);\n  height: 0;\n  left: calc(var(--padding-left) / 2 - var(--light-bar-width) / 2);\n  z-index: 1;\n}\n\n.nt-light {\n  background: var(--light-bar);\n  width: var(--light-spread-length);\n  height: 100%;\n  opacity: var(--light-opacity);\n  pointer-events: none;\n  position: absolute;\n  z-index: -1;\n  left: var(--light-bar-width);\n}\n\n.nt-light-bar-top,\n.nt-light-bar-bottom {\n  background: var(--light-bar);\n  width: var(--terminal-side-length);\n  height: var(--terminal-side-length);\n  position: absolute;\n  left: calc(\n    (var(--terminal-side-length) / 2 * -1) + var(--light-bar-width) / 2\n  );\n}\n\n.nt-light-bar-top {\n  top: calc(var(--terminal-side-length) / 2 * -1);\n}\n\n.nt-light-bar-bottom {\n  bottom: calc(var(--terminal-side-length) / 2 * -1);\n}\n\n.nt-light-bar-top.nt-on-fold,\n.nt-light-bar-bottom.nt-on-fold {\n  background: var(--light-bar-tip-on-fold);\n  z-index: 1;\n}\n\n/** TOP AND BOTTOM SHADOWS **/\n\n.nt-top-gradient,\n.nt-bottom-gradient {\n  width: 100%;\n  height: 30px;\n  transition: opacity 300ms;\n  pointer-events: none;\n  position: absolute;\n  left: 0;\n  z-index: 5;\n}\n\n.nt-top-gradient {\n  opacity: 0;\n  background: linear-gradient(to bottom, var(--bg), transparent);\n}\n\n.nt-bottom-gradient {\n  opacity: 1;\n  background: linear-gradient(to top, var(--bg), transparent);\n}\n\n/** ACCESSIBILITY **/\n.nt-a:focus-visible {\n  outline: none;\n  background: var(--bg-anchor-hover);\n}\n\n.nt-toggle-fold-btn:focus-visible {\n  outline: none;\n  background: var(--bg-toggle-fold-btn-hover);\n}\n\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn:focus-visible) {\n  background: var(--bg-sub-anchors);\n}\n\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn:focus-visible)\n  > .nt-foldable\n  .nt-a {\n  background: var(--bg-sub-anchors);\n}\n\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn.nt-level-1:focus-visible)\n  .nt-indent-block:nth-child(1),\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn.nt-level-2:focus-visible)\n  .nt-indent-block:nth-child(2),\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn.nt-level-3:focus-visible)\n  .nt-indent-block:nth-child(3),\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn.nt-level-4:focus-visible)\n  .nt-indent-block:nth-child(4),\nli:has(> .nt-non-foldable > .nt-toggle-fold-btn.nt-level-5:focus-visible)\n  .nt-indent-block:nth-child(5) {\n  border-color: var(--indent-line-highlight);\n}\n\n.nt-toggle-fold-btn:focus-visible + .nt-a {\n  background-color: var(--bg-anchor-hover);\n}\n\n/** UTILITY CLASSES **/\n\n.nt-opacity-1 {\n  opacity: 1;\n}\n\n.nt-ellipsis {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/** UNUSED CLASSES **/\n\n/* Use the following classes to see if you like the result */\n\n/*\n- nt-enlightend-a: This class is dynamically only added to anchors in the TOC that refers to sections currently in view.\n*/\n"],"names":[]}