@podlite/to-jsx/esm/podlite.css

Render Podlite markup as React JSX components

/* Start podlite */ 
/* body {
    margin: 0;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
  } */
  
  
  pre {
    display: block;
    word-break: break-all;
    word-wrap: break-word;
    background-color: var(--color-canvas-default, #f8f8f8);
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
    padding: 16px;
  }
  
  code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
  }
  
  img {
    max-width: 1024px;
  }
  
  table {
    word-break: normal;
    border-spacing: 0;
    border-collapse: collapse;
    text-align: center;
  }
  table caption {
    margin-bottom: 0.8em;
    caption-side: bottom;
  }
  
  table tbody tr:hover {
    background-color:  #eee;
    -webkit-transition: .5s;
    transition: .5s
  }
  
  tr th {
    vertical-align: bottom;
    border-bottom: 2px solid #eee;
  }
  
  td {
    padding: 8px;
    border: 1px solid #eee;
  }
  
  .footnote a {
    text-decoration: none;
  }
  .footnotes {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #eee;
  }
  
  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  
  .shadow {
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
    box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  }
  .box {
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12)
  ;
    margin: 100px auto;
    background: white;
    border-radius: 5px;
  }
  
  .image_block video {
    max-width: 100%;
    /* margin: 0 auto; */
    margin-bottom: 1em;
  }
  
  .image_block video{
    width: 100%;
    outline: none;
    border: none;
  }
  
  /* plugins */
  .mermaid svg {
    display: block;
    margin: auto;
  }

  .toc {
    padding: 1rem;
  }
  
  .toc-list {
    list-style: none;
    font-size: .8rem;
  }

  .caption {
    text-align: center;
    font-size: 0.9rem;
}

aside.notify {
    border-left: .25em solid;
    padding-left: 1rem ;
}

aside.notify>:first-child {
    margin-top: 0
}

aside.notify>:last-child {
    margin-bottom: 0
}

aside.notify.note {
    border-left-color: #0085f2
}

aside.notify.note .notify-title {
    color:  #0085f2
}

aside.notify.tip {
    border-left-color: #007936;
}

aside.notify.tip .notify-title {
    color: #007936;
}


aside.notify.important {
    border-left-color: #8250df
}

aside.notify.important .notify-title {
    color: #8250df
}

aside.notify.warning {
    border-left-color: #9a6700;;
}

aside.notify.warning .notify-title {
    color: #9a6700;;
}

aside.notify.caution {
    border-left-color: #d30038;
}

aside.notify.caution .notify-title {
    color: #d30038;
}

/* Folded blocks using <details>/<summary> */
details.folded {
    border: 1px solid var(--color-border-default, #d0d7de);
    border-radius: 6px;
    margin-top: 1em;
    margin-bottom: 1em;
}

details.folded > summary {
    cursor: pointer;
    padding: 0.5em 1em;
    background-color: var(--color-canvas-subtle, #f6f8fa);
    border-radius: 6px 6px 0 0;
    font-weight: 500;
    list-style: none;
}

details.folded > summary::-webkit-details-marker {
    display: none;
}

details.folded > summary::before {
    content: '▶ ';
    display: inline-block;
    margin-right: 0.5em;
    transition: transform 0.2s ease;
}

details.folded[open] > summary::before {
    transform: rotate(90deg);
}

details.folded[open] > summary {
    border-bottom: 1px solid var(--color-border-default, #d0d7de);
    border-radius: 6px 6px 0 0;
}

details.folded > .folded-content {
    padding: 1em;
}

/* Folded heading sections — =for head L :folded wraps the whole section.
   Use long-hand vertical margins so horizontal margins fall through the
   cascade (e.g. host stylesheets that center block elements with
   `details { margin-left: auto }` keep working — shorthand `margin: 1em 0`
   would clobber that with margin-left:0 due to specificity). */
details.folded-section {
    margin-top: 1em;
    margin-bottom: 1em;
}

details.folded-section > summary.folded-section-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.25em;
}

details.folded-section > summary.folded-section-summary::-webkit-details-marker {
    display: none;
}

details.folded-section > summary.folded-section-summary::before {
    content: '▶';
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

details.folded-section[open] > summary.folded-section-summary::before {
    transform: rotate(90deg);
}

/* Render the heading inline with the disclosure marker so the summary stays
   on one line. Preserves <h1>..<h6> semantics (heading level announced to
   assistive tech) while fixing the visual break caused by block-level h*.
   The `.line-src` selector handles the case where the editor wraps each
   node for live preview line-sync. */
details.folded-section > summary.folded-section-summary h1,
details.folded-section > summary.folded-section-summary h2,
details.folded-section > summary.folded-section-summary h3,
details.folded-section > summary.folded-section-summary h4,
details.folded-section > summary.folded-section-summary h5,
details.folded-section > summary.folded-section-summary h6,
details.folded-section > summary.folded-section-summary > .line-src {
    display: inline;
    margin: 0;
}

details.folded-section > .folded-section-content {
    padding: 0.5em 0 0 1em;
}

/* TOC per-item fold — single-line disclosure + link for toc items that have
   nested children (leaf items render as plain li without a marker).
   A left gutter (padding-left) on every toc item reserves space for the
   disclosure marker so that text at the same level starts on the same
   x-position regardless of whether an item is foldable. The marker sits
   in that gutter via absolute positioning. */
li.toc-item,
li.toc-item-foldable {
    position: relative;
    padding-left: 1.2em;
    list-style: none;
}

/* Normalise nested toc-list indentation — browser default padding-left (40px)
   stacks with the per-item gutter, producing exaggerated indent for deeper
   levels. Use a predictable 1.5em step per level. */
ul.toc-list {
    padding-left: 1.5em;
    list-style: none;
}
.toc > ul.toc-list {
    padding-left: 0;
}

li.toc-item-foldable > details.toc-fold > summary.toc-list-summary {
    cursor: pointer;
    list-style: none;
}

li.toc-item-foldable > details.toc-fold > summary.toc-list-summary::-webkit-details-marker {
    display: none;
}

li.toc-item-foldable > details.toc-fold > summary.toc-list-summary::before {
    content: '▶';
    position: absolute;
    left: 0;
    display: inline-block;
    transition: transform 0.2s ease;
}

li.toc-item-foldable > details.toc-fold[open] > summary.toc-list-summary::before {
    transform: rotate(90deg);
}

/* Keep summary content inline when editor preview wraps nodes in .line-src */
li.toc-item-foldable > details.toc-fold > summary.toc-list-summary > .line-src {
    display: inline;
}

/* Folded notification blocks */
details.notify.folded {
    border-left-width: 4px;
    border-left-style: solid;
}

details.notify.folded > summary {
    background-color: transparent;
}

details.notify.folded.note {
    border-left-color: #0085f2;
}

details.notify.folded.note > summary {
    color: #0085f2;
}

details.notify.folded.tip {
    border-left-color: #007936;
}

details.notify.folded.tip > summary {
    color: #007936;
}

details.notify.folded.important {
    border-left-color: #8250df;
}

details.notify.folded.important > summary {
    color: #8250df;
}

details.notify.folded.warning {
    border-left-color: #9a6700;
}

details.notify.folded.warning > summary {
    color: #9a6700;
}

details.notify.folded.caution {
    border-left-color: #d30038;
}

details.notify.folded.caution > summary {
    color: #d30038;
}

/* Folded tables */
/* details.table-folded > .folded-content {
     padding: 0;
    overflow-x: auto;
} */

/* details.table-folded table {
    margin: 0;
    border-top: none;
    border-radius: 0 0 6px 6px;
} */

/* Task lists */
ul.task-list {
    list-style: none;
    padding-left: 2em;
}

li.task-list-item {
    margin-left: -1em;
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.35em;
}

li.task-list-item > input[type='checkbox'] {
    /* nudge the checkbox down so its centre aligns roughly with the cap-height
       of the first line of text rather than sitting at its top edge */
    margin-top: 0.25em;
    flex-shrink: 0;
}

li.task-list-item p {
    margin: 0;
}

  /* End of podlite */