neotoc/dist/base-modern.css.map

Ultra-smooth table of contents UI generator for your docs and blogs.

{"version":3,"mappings":"AAmBA,sZAiCA,gEAIE,oEAIA,sDAKA,wDAGA,8DAGA,+DAOF,4NAWA,uGAIE,8FAKA,gDAMF,2CAEE,mDAMF,iEAIA,kQAmBA,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,qHAQA,0IAQE,0DAOF,gFAIA,2EAIA,6EAIA,qHAQA,iNASA,kOAWA,+QAaA,6DAIA,mEAIA,+JAOA,8FAMA,0IAWA,uFAKA,uFAMA,mEAKA,0FAKA,6FAIA,gHAMA,8IAAA,+IAAA,+IAAA,+IAAA,+IAaA,gFAMA,wBAIA","sources":["../src/styles/base-modern.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: 94; /* do not use percentage sign */\n  --toggle-fold-btn-width: 1.7em; /* should in em unit */\n  --indent-line-gap: 2px; /* 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: 6px;\n  --padding-left: 1rem;\n  --light-bar-width: 4px;\n  --light-bar-tip-radius: calc(var(--light-bar-width) / 2);\n  --light-spread-length: 250px;\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;\n  border-image: linear-gradient(\n      to right,\n      transparent,\n      var(--fold-indicator-line),\n      transparent\n    )\n    1;\n  position: absolute;\n  bottom: 0;\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  border-radius: 4px;\n  border: 1px solid var(--border-header-btn);\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(:first-child) {\n  border-left: 1px solid var(--border-header-btn);\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: calc(var(--light-bar-tip-radius) * 2);\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: linear-gradient(to left, transparent, 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  border-radius: 50%;\n  position: absolute;\n  transition: box-shadow 300ms;\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  box-shadow: 0 0 5px var(--light-bar-tip-on-fold);\n  z-index: 1;\n}\n\n.nt-light-bar[style*='height: 0px'] .nt-light-bar-top.nt-on-fold {\n  background-color: transparent;\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":[]}