organic_ast_explorer/src/OrgAst.module.css

.OrgAst {
  flex: 1;
  background: #eeeeee;
  padding: 5px;
  overflow: auto;
}

.OrgAstNode {
  border: 1px solid #000000;
  background: #ffffff;
  box-shadow: 3px 3px 4px #000000;

  > details {
    border: 1px solid #000000;
    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: #000000;
    }
  }
}

.OrgAstNode.selected {
  > .OrgAstNodeType {
    background: #9cfc97;
  }
}

.OrgAstNode.hovered:not(.selected) {
  > .OrgAstNodeType {
    background: #70f8ba;
  }
}

.OrgAstNodeType {
  background: #6ccff6;
  padding: 3px;
  overflow: hidden;

  > 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;
  }
}

.OrgAstChildren {
  padding: 5px 5px 5px 20px;
  background: #eeeeee;
}

.OrgAstProperties,
.OrgAstObjectTree,
.OrgAstOptionalPair {
  border: 1px solid #000000;
  margin: 5px;

  > tbody {
    > tr {
      border-width: 1px 0;
      border-style: solid;
      border-color: #000000;

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

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

    > tr:nth-child(odd) {
      background-color: #eeeeee;
    }
    > tr:nth-child(even) {
      background-color: #ffffff;
    }
  }
}

.OrgAstObjectTree {
  > tbody {
    border-style: dashed;
    border-color: #000000;
  }
  > 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;
  }
}