@ima/devtools/src/components/molecule/entryListItem/entryListItem.module.less

IMA.js debugging panel in the Chrome Developer Tools window.

.wrapper {
  border-bottom: 1px solid var(--color-border);

  font-size: 12px;

  user-select: none;

  cursor: pointer;

  &:hover {
    background: var(--oc-gray-0);
  }

  &:active {
    background: var(--oc-gray-1);
  }

  &:last-child {
    border-bottom: none;
  }

  &--selected {
    background: var(--oc-gray-1);
  }

  &--green {
    .label {
      color: var(--oc-green-7);
    }

    .event {
      color: var(--oc-green-6);
    }

    .type {
      color: var(--oc-green-7);

      background: var(--oc-green-1);
    }
  }

  &--red {
    .label {
      color: var(--oc-red-7);
    }

    .event {
      color: var(--oc-red-6);
    }

    .type {
      color: var(--oc-red-7);

      background: var(--oc-red-1);
    }
  }

  &--yellow {
    .label {
      color: var(--oc-yellow-7);
    }

    .event {
      color: var(--oc-yellow-6);
    }

    .type {
      color: var(--oc-yellow-7);

      background: var(--oc-yellow-1);
    }
  }

  &--blue {
    .label {
      color: var(--oc-blue-7);
    }

    .event {
      color: var(--oc-blue-6);
    }

    .type {
      color: var(--oc-blue-7);

      background: var(--oc-blue-1);
    }
  }

  &--indigo {
    .label {
      color: var(--oc-indigo-7);
    }

    .event {
      color: var(--oc-indigo-6);
    }

    .type {
      color: var(--oc-indigo-7);

      background: var(--oc-indigo-1);
    }
  }

  &--violet {
    .label {
      color: var(--oc-violet-7);
    }

    .event {
      color: var(--oc-violet-6);
    }

    .type {
      color: var(--oc-violet-7);

      background: var(--oc-violet-1);
    }
  }

  &--gray {
    .label {
      color: var(--oc-gray-7);
    }

    .event {
      color: var(--oc-gray-6);
    }

    .type {
      color: var(--oc-gray-7);

      background: var(--oc-gray-1);
    }
  }

  &--pink {
    .label {
      color: var(--oc-pink-7);
    }

    .event {
      color: var(--oc-pink-6);
    }

    .type {
      color: var(--oc-pink-7);

      background: var(--oc-pink-1);
    }
  }

  &--grape {
    .label {
      color: var(--oc-grape-7);
    }

    .event {
      color: var(--oc-grape-6);
    }

    .type {
      color: var(--oc-grape-7);

      background: var(--oc-grape-1);
    }
  }

  &--cyan {
    .label {
      color: var(--oc-cyan-7);
    }

    .event {
      color: var(--oc-cyan-6);
    }

    .type {
      color: var(--oc-cyan-7);

      background: var(--oc-cyan-1);
    }
  }

  &--teal {
    .label {
      color: var(--oc-teal-7);
    }

    .event {
      color: var(--oc-teal-6);
    }

    .type {
      color: var(--oc-teal-7);

      background: var(--oc-teal-1);
    }
  }

  &--lime {
    .label {
      color: var(--oc-lime-7);
    }

    .event {
      color: var(--oc-lime-6);
    }

    .type {
      color: var(--oc-lime-7);

      background: var(--oc-lime-1);
    }
  }

  &--orange {
    .label {
      color: var(--oc-orange-7);
    }

    .event {
      color: var(--oc-orange-6);
    }

    .type {
      color: var(--oc-orange-7);

      background: var(--oc-orange-1);
    }
  }
}

.label,
.timeWrapper {
  padding: 6px 8px;
}

.event {
  font-weight: normal;
}

.tagWrapper {
  margin-left: 8px;

  font-family: var(--font-family-monospace);
  text-align: center;
  color: var(--color-white);
}

.type {
  border-radius: 3px;
  padding: 2px 4px;

  font-size: 11px;
  color: var(--oc-gray-7);

  background: var(--oc-gray-3);
}

.promiseStatus {
  border: 1px solid var(--oc-gray-4);
  border-radius: 3px;
  padding: 2px 4px;

  font-size: 10px;
  color: var(--oc-gray-6);

  &-- {
    &pending {
      color: var(--color-primary);
    }
  }

  svg {
    margin-right: 4px;
    margin-bottom: -2px;
    height: 11px;
  }
}

.label {
  font-weight: 500;
}

.timeWrapper {
  font-size: 11px;
  text-align: right;
  color: var(--color-text-muted);
}

.time {
  border-radius: 3px;
  padding: 2px 4px;

  background: var(--oc-gray-2);
}