inspector.less

@import './colors.less';

.cell-inspector {
  width: 20vw;
  min-width: 16em;
  max-height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.cell-inspector::-webkit-scrollbar {
  display: none;
}

.cell-inspector-cell {
  .rounded();
  .monospace();
  transition: opacity 1s, border-color 1s;
  padding: 4px;
  margin: 2px;
  border: 1px solid @blue;

  backdrop-filter: blur(5px);
  background: fadeout(black, 50%);

  > table {
    font-size: 12px;
    .key {
      color: @blue;
    }
  }
}

a.cell-inspector-cell {
  text-decoration: none;
  color: @blue;
}

.cell-inspector-cell-head {
  display: flex;
  flex-flow: row nowrap;
}

.cell-inspector-cell.dead {
  text-decoration-line: line-through;
}

.cell-inspector-cell.inactive {
  opacity: 0.7;
  border-color: darkgray;
}

.cell-inspector-cell-tag {
  text-align: right;
  margin-left: auto;
  margin-right: 0.5em;
  font-family: Menlo;
}

.spark-line {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  height: 1em;
}

.spark-line-value {
  border-top: 1px solid rgb(115, 213, 255);
  background: rgb(115, 183, 255, 0.3);
  width: 1em;
  transition: background-color 1s, border-color 1s;
}

.cell-inspector-cell.inactive .spark-line-value {
  border-top: 1px solid darkgray;
  background: darkgray;
}