forge/web_src/css/markup/content.css

.markup {
  overflow: hidden;
  font-size: 14px; /* 14px for comments, overridden to 16px for .file-view below. */
  line-height: 1.5 !important;
  overflow-wrap: break-word;
}

.markup > *:first-child {
  margin-top: 0 !important;
}

.markup > *:last-child {
  margin-bottom: 0 !important;
}

.markup a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.markup .absent {
  color: var(--color-red);
}

.markup .anchor {
  float: left;
  padding-inline-end: 4px;
  margin-inline-start: -20px;
  color: inherit;
}

.markup .anchor .svg {
  vertical-align: middle;
}

.markup .anchor:focus {
  outline: none;
}

.markup h1 .anchor {
  margin-top: -2px; /* re-align to center */
}

.markup h1 .anchor .svg,
.markup h2 .anchor .svg,
.markup h3 .anchor .svg,
.markup h4 .anchor .svg,
.markup h5 .anchor .svg,
.markup h6 .anchor .svg {
  visibility: hidden;
}

.markup h1:hover .anchor .svg,
.markup h2:hover .anchor .svg,
.markup h3:hover .anchor .svg,
.markup h4:hover .anchor .svg,
.markup h5:hover .anchor .svg,
.markup h6:hover .anchor .svg {
  visibility: visible;
}

.markup h2 .anchor .svg,
.markup h3 .anchor .svg,
.markup h4 .anchor .svg {
  position: relative;
  top: -2px;
}

.markup h1,
.markup h2,
.markup h3,
.markup h4,
.markup h5,
.markup h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}

.markup h1 tt,
.markup h1 code,
.markup h2 tt,
.markup h2 code,
.markup h3 tt,
.markup h3 code,
.markup h4 tt,
.markup h4 code,
.markup h5 tt,
.markup h5 code,
.markup h6 tt,
.markup h6 code {
  font-size: inherit;
}

.markup h1 {
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid var(--color-secondary);
}

.markup h2 {
  padding-bottom: 0.3em;
  font-size: 1.5em;
  border-bottom: 1px solid var(--color-secondary);
}

.markup h3 {
  font-size: 1.25em;
}

.markup h4 {
  font-size: 1em;
}

.markup h5 {
  font-size: 0.875em;
}

.markup h6 {
  font-size: 0.85em;
  color: var(--color-text-light-2);
}

.markup p,
.markup blockquote,
.markup details,
.markup ul,
.markup ol,
.markup dl,
.markup table,
.markup pre {
  margin-top: 0;
  margin-bottom: 16px;
}

/* override p:last-child from base.css.
Fomantic assumes that <p>/<hX> elements only have margins between elements, but not for the first's top or last's bottom.
In markup content, we always use bottom margin for all elements */
.markup p:last-child {
  margin-bottom: 16px;
}

.markup hr {
  height: 4px;
  padding: 0;
  margin: 16px 0;
  background-color: var(--color-secondary);
  border: 0;
}

.markup ul,
.markup ol {
  padding-inline-start: 2em;
}

.markup .task-list-item {
  list-style-type: none;
}

.markup .task-list-item > ul {
  margin-top: 4px;
}

.markup .task-list-item p + ul {
  margin-top: 16px;
}

.markup .task-list-item input[type="checkbox"] {
  margin-bottom: 0.25em;
  margin-inline: -1.4em 0.6em;
  vertical-align: middle;
  padding: 0;
}

.markup .task-list-item input[type="checkbox"] + p {
  margin-inline-start: -0.2em;
  display: inline;
}

.markup .task-list-item > p {
  margin-inline: 16px;
}

.markup .task-list-item + .task-list-item {
  margin-top: 4px;
}

.markup input[type="checkbox"] {
  margin-inline-end: .25em;
  margin-bottom: .25em;
  cursor: default;
  opacity: 1 !important; /* override fomantic on edit preview */
  pointer-events: auto !important; /* override fomantic on edit preview */
  vertical-align: middle !important; /* override fomantic on edit preview */
}

.markup ul ul,
.markup ul ol,
.markup ol ol,
.markup ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

.markup ol ol,
.markup ul ol {
  list-style-type: lower-roman;
}

.markup li > p {
  margin-top: 16px;
}

.markup li + li {
  margin-top: 0.25em;
}

.markup dl {
  padding: 0;
}

.markup dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: var(--font-weight-semibold);
}

.markup dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

.markup blockquote {
  margin-inline-start: 0;
  padding: 0 15px;
  color: var(--color-text-light-2);
  border-left: 0.25em solid var(--color-secondary);
}

.markup blockquote > :first-child {
  margin-top: 0;
}

.markup blockquote > :last-child {
  margin-bottom: 0;
}

.markup table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: auto;
}

.markup table th {
  font-weight: var(--font-weight-semibold);
}

.markup table th,
.markup table td {
  padding: 6px 13px !important;
  border: 1px solid var(--color-secondary) !important;
}

.markup table tr {
  border-top: 1px solid var(--color-secondary);
}

.markup table tr:nth-child(2n) {
  background-color: var(--color-markup-table-row);
}

.markup img,
.markup video {
  max-width: 100%;
  box-sizing: initial;
}

/* GitHub-style dark/light image switching.
   These fragments are kept in the rendered HTML as part of the `src` attribute.
   We decide which to show via `data-hanzo-theme-dark` on `<html>`, which is
   mirrored from `--is-dark-theme` in JS (so it also works with auto/custom themes).
*/
html[data-hanzo-theme-dark="true"] .markup a[href*="#gh-light-mode-only"],
html[data-hanzo-theme-dark="true"] .markup img[src*="#gh-light-mode-only"],
html[data-hanzo-theme-dark="false"] .markup a[href*="#gh-dark-mode-only"],
html[data-hanzo-theme-dark="false"] .markup img[src*="#gh-dark-mode-only"] {
  display: none;
}

.file-view.markup {
  padding: 1em 2em;
  font-size: 16px;
}

.file-view.markup:has(.file-not-rendered-prompt) {
  padding: 0; /* let the file-not-rendered-prompt layout itself */
}

/* this background ensures images can break <hr>. We can only do this on
   cases where the background is known and not transparent. */
.file-view.markup img,
.file-view.markup video,
.comment-body .markup img, /* regular comment */
.comment-body .markup video,
.comment-content .markup img, /* code comment */
.comment-content .markup video,
.wiki .markup img,
.wiki .markup video {
  background: var(--color-box-body);
}

.markup img[align="right"],
.markup video[align="right"] {
  padding-inline-start: 20px;
}

.markup img[align="left"],
.markup video[align="left"] {
  padding-inline-end: 28px;
}

.markup span.frame {
  display: block;
  overflow: hidden;
}

.markup span.frame > span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid var(--color-secondary);
}

.markup span.frame span img,
.markup span.frame span video {
  display: block;
  float: left;
}

.markup span.frame span span {
  display: block;
  padding: 5px 0 0;
  clear: both;
  color: var(--color-text);
}

.markup code,
.markup tt {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  white-space: break-spaces;
  background-color: var(--color-markup-code-inline);
  border-radius: var(--border-radius);
}

.markup code br,
.markup tt br {
  display: none;
}

.markup del code {
  text-decoration: inherit;
}

.markup pre > code {
  font-size: 100%;
}

.markup .code-block,
.markup .code-block-container {
  position: relative;
}

.markup .code-block-container.code-overflow-wrap pre > code {
  white-space: pre-wrap;
}

.markup .code-block-container.code-overflow-scroll pre {
  overflow-x: auto;
}

.markup .code-block-container.code-overflow-scroll pre > code {
  white-space: pre;
  overflow-wrap: normal;
}

.markup .highlight {
  margin-bottom: 16px;
}

.markup .highlight pre,
.markup pre {
  padding: 16px;
  font-size: 85%;
  line-height: 1.45;
  background-color: var(--color-markup-code-block);
  border-radius: var(--border-radius);
}

.markup .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

.markup pre code,
.markup pre tt {
  display: inline;
  padding: 0;
  line-height: inherit;
  background-color: transparent;
  border: 0;
}

.markup pre code::before,
.markup pre code::after,
.markup pre tt::before,
.markup pre tt::after {
  content: normal;
}

.markup kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: var(--color-text-light);
  vertical-align: middle;
  background-color: var(--color-markup-code-inline);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-kbd);
}

.markup .ui.list .list,
.markup ol.ui.list ol,
.markup ul.ui.list ul {
  padding-inline-start: 2em;
}

.markup details.frontmatter-content summary {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 0.25em;
}

.markup details.frontmatter-content svg {
  vertical-align: middle;
  margin: 0 0.25em;
}

.external-render-iframe {
  display: block; /* removes the inline baseline gap below the iframe */
  width: 100%;
  height: max(300px, 80vh);
  border: none;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.markup-content-iframe {
  display: block;
  border: none;
  width: 100%;
  height: var(--height-loading); /* actual height is set in JS after loading */
  overflow: hidden;
  color-scheme: normal; /* match the value inside the iframe to allow it to become transparent */
}

.markup-block-error {
  display: block !important; /* override fomantic .ui.form .error.message {display: none} */
  border: none !important;
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: none !important;
  font-size: 85% !important;
  white-space: pre-wrap !important;
  padding: 0.5rem 1rem !important;
  text-align: left !important;
}

.markup-block-error + pre {
  border-top: none !important;
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.file-view.markup.orgmode li.unchecked::before {
  content: "[ ] ";
}

.file-view.markup.orgmode li.checked::before {
  content: "[x] ";
}

.file-view.markup.orgmode li.indeterminate::before {
  content: "[-] ";
}

/* This is only needed for <p> because they are literally acting as paragraphs,
 * and thus having an ::before on the same line would force the paragraph to
 * move to the next line. This can be avoided by an inline-block display that
 * avoids that property while still having the other properties of the block
 * display. */
.file-view.markup.orgmode li.unchecked > p,
.file-view.markup.orgmode li.checked > p,
.file-view.markup.orgmode li.indeterminate > p {
  display: inline-block;
}

/* auto-hide-control is a control element or a container for control elements,
   it floats over the code-block and only shows when the code-block is hovered. */
.markup .auto-hide-control {
  position: absolute;
  z-index: 1;
  visibility: hidden; /* prevent from click events even opacity=0 */
  opacity: 0;
  transition: var(--transition-hover-fade);
}

/* all rendered code-block elements are in their container,
the manually written code-block elements on "packages" pages don't have the container */
.markup .code-block-container:hover .auto-hide-control,
.markup .code-block:hover .auto-hide-control {
  visibility: visible;
  opacity: 1;
}

@media (hover: none) {
  .markup .auto-hide-control {
    visibility: visible;
    opacity: 1;
  }
}

/* can not use regular transparent button colors for hover and active states
   because we need opaque colors here as code can appear behind the button */
.markup .auto-hide-control.ui.button:hover,
.markup .auto-hide-control .ui.button:hover {
  background: var(--color-secondary) !important;
}

.markup .auto-hide-control.ui.button:active,
.markup .auto-hide-control .ui.button:active {
  background: var(--color-secondary-dark-1) !important;
}