UNPKG

@ima/devtools

Version:

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

299 lines (224 loc) 3.89 kB
.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); }