organic_ast_explorer/src/OrgAst.module.css

.OrgAst {
  --ast-background-color: #111111;
  --ast-font-color: #ffffff;

  --ast-node-border-color: #bbbbbb;
  --ast-node-shadow-color: #bbbbbb;

  --ast-node-type-background-color: #933009;
  --ast-node-type-hover-background-color: #8f0745;
  --ast-node-type-selected-background-color: #630368;

  --ast-node-subsection-border-color: #ffffff;

  --ast-node-children-background-color: #111111;

  --ast-node-table-row-odd-background-color: #111111;
  --ast-node-table-row-even-background-color: #000000;
}
@media (prefers-color-scheme: light) {
  .OrgAst {
    --ast-background-color: #eeeeee;
    --ast-font-color: #000000;

    --ast-node-background-color: #ffffff;
    --ast-node-border-color: #000000;
    --ast-node-shadow-color: #000000;

    --ast-node-type-background-color: #6ccff6;
    --ast-node-type-hover-background-color: #70f8ba;
    --ast-node-type-selected-background-color: #9cfc97;

    --ast-node-subsection-border-color: #000000;

    --ast-node-children-background-color: #eeeeee;

    --ast-node-table-row-odd-background-color: #eeeeee;
    --ast-node-table-row-even-background-color: #ffffff;
  }
}

.OrgAst {
  background: var(--ast-background-color);
  color: var(--ast-font-color);
  padding: 5px;
  overflow: auto;
}

.OrgAstNode {
  border: 1px solid var(--ast-node-border-color);
  background: var(--ast-node-background-color);
  box-shadow: -3px 3px 1px var(--ast-node-shadow-color);

  > details {
    border: 1px solid var(--ast-node-subsection-border-color);
    margin: 5px 5px 5px 2px;

    > summary {
      cursor: pointer;
      padding: 5px 2px;
    }
  }

  > details[open] {
    > summary {
      border-width: 0 0 1px 0;
      border-style: dotted;
      border-color: var(--ast-node-subsection-border-color);
    }
  }
}

.OrgAstNode.selected {
  > .OrgAstNodeType {
    background: var(--ast-node-type-selected-background-color);
  }
}

.OrgAstNode.hovered:not(.selected) {
  > .OrgAstNodeType {
    background: var(--ast-node-type-hover-background-color);
  }
}

.OrgAstNodeType {
  background: var(--ast-node-type-background-color);
  padding: 3px;
  overflow: hidden;
  cursor: pointer;

  > span:first-child {
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
  }
  > span:nth-child(2) {
    margin-left: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
      Consolas, "DejaVu Sans Mono", monospace;
    font-size: 0.8rem;
  }
}

.OrgAstChildren {
  padding: 5px 5px 5px 20px;
  background: var(--ast-node-children-background-color);
}

.OrgAstProperties,
.OrgAstObjectTree,
.OrgAstOptionalPair {
  border: 1px solid var(--ast-node-subsection-border-color);
  margin: 5px;

  > tbody {
    > tr {
      border-width: 1px 0;
      border-style: solid;
      border-color: var(--ast-node-subsection-border-color);

      > th,
      > td {
        padding: 5px;
      }

      > th {
        font-weight: 700;
        text-align: right;
        padding-right: 5px;
      }
    }

    > tr:nth-child(odd) {
      background-color: var(--ast-node-table-row-odd-background-color);
    }
    > tr:nth-child(even) {
      background-color: var(--ast-node-table-row-even-background-color);
    }
  }
}

.OrgAstObjectTree {
  > tbody {
    border-style: dashed;
    border-color: var(--ast-node-subsection-border-color);
  }
  > tbody:not(:first-child, :last-child) {
    border-width: 3px 0;
  }
  > tbody:first-child:not(:only-child) {
    border-width: 0 0 3px 0;
  }
  > tbody:last-child:not(:only-child) {
    border-width: 3px 0 0 0;
  }
}