@ima/devtools
Version:
IMA.js debugging panel in the Chrome Developer Tools window.
299 lines (224 loc) • 3.89 kB
text/less
.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);
}