@fleetbase/ember-ui/addon/styles/components/activity-log.css

Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.

.activity-log {
    @apply text-gray-900 dark:text-gray-100;
}

.activity-log-header {
    @apply mb-3 flex items-center justify-between gap-3;
}

.activity-log-title {
    @apply text-sm font-semibold tracking-wide text-gray-500 dark:text-gray-400;
}

.activity-log-header-actions,
.activity-log-filters {
    @apply flex flex-row items-center gap-2;
}

.activity-log-list {
    @apply overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900;
}

.activity-log-item {
    @apply relative flex min-h-[56px] items-center gap-2 px-4 py-3;
}

.activity-log-item:not(:last-child)::before {
    @apply absolute bottom-0 left-[26px] top-[36px] w-px bg-gray-200 dark:bg-gray-700;
    content: '';
}

.activity-log-marker {
    @apply relative z-10 mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-yellow-500 text-[11px] font-semibold leading-none text-white shadow-sm ring-2 ring-white dark:ring-gray-900;
}

.activity-log-marker img {
    @apply h-full w-full object-cover;
}

.activity-log-marker span {
    @apply block leading-none;
}

.activity-log-row {
    @apply flex min-w-0 flex-1 items-start justify-between gap-4;
}

.activity-log-main {
    @apply flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1;
}

.activity-log-sentence {
    @apply min-w-0 text-sm font-medium leading-6 text-gray-700 dark:text-gray-300;
}

.activity-log-actor,
.activity-log-object,
.activity-log-change-count {
    @apply inline border-0 bg-transparent p-0 text-left font-semibold text-gray-900 underline-offset-4 transition hover:underline focus:outline-none focus:ring-0 dark:text-gray-100;
}

.activity-log-verb,
.activity-log-muted {
    @apply text-gray-500 dark:text-gray-400;
}

.activity-log-inline-change {
    @apply inline;
}

.activity-log-inline-attribute {
    @apply font-semibold text-gray-700 dark:text-gray-200;
}

.activity-log-inline-value {
    @apply max-w-[16rem] truncate align-bottom font-semibold text-gray-900 dark:text-gray-100;
}

.activity-log-change-trigger {
    @apply relative inline-flex;
}

.activity-log-change-count {
    @apply rounded-md bg-gray-100 px-2 py-0.5 no-underline hover:bg-gray-200 hover:no-underline dark:bg-gray-800 dark:hover:bg-gray-700;
}

.activity-log-time {
    @apply mt-0.5 shrink-0 whitespace-nowrap text-sm font-medium text-gray-400 dark:text-gray-500;
}

.activity-log-badge {
    @apply inline-flex items-center rounded-md px-2 py-0.5 text-xs ring-1;
}

.activity-log-empty {
    @apply flex min-h-24 items-center justify-center rounded-lg border border-dashed border-gray-300 bg-gray-50 p-6 text-center dark:border-gray-700 dark:bg-gray-900;
}

.activity-log-empty-icon {
    @apply mb-2 text-gray-400;
}

.activity-log-empty-text {
    @apply text-sm font-medium text-gray-600 dark:text-gray-400;
}

.activity-log-changes-popover {
    @apply z-50 m-0 overflow-hidden rounded-lg border border-gray-200 bg-white p-0 shadow-xl ring-1 ring-black/5 dark:border-gray-700 dark:bg-gray-900 dark:ring-white/10;
    min-width: 26rem;
    max-width: min(36rem, calc(100vw - 2rem));
}

.activity-log-changes-table {
    @apply grid text-xs;
}

.activity-log-changes-row {
    @apply grid items-center border-t border-gray-100 dark:border-gray-800;
    grid-template-columns: minmax(8rem, 0.9fr) minmax(8rem, 1fr) minmax(8rem, 1fr);
}

.activity-log-changes-table.without-previous-values .activity-log-changes-row {
    grid-template-columns: minmax(8rem, 0.9fr) minmax(8rem, 1fr);
}

.activity-log-changes-row:first-child {
    @apply border-t-0;
}

.activity-log-changes-row > div {
    @apply min-w-0 truncate px-3 py-2;
}

.activity-log-changes-head {
    @apply bg-gray-50 text-[11px] font-semibold text-gray-500 dark:bg-gray-800 dark:text-gray-400;
}

.activity-log-change-attribute {
    @apply font-medium text-gray-600 dark:text-gray-300;
}

.activity-log-change-value {
    @apply font-medium text-gray-900 dark:text-gray-100;
}

.activity-log-change-value-old {
    @apply text-gray-500 dark:text-gray-400;
}

.activity-log-change-value-new {
    @apply text-gray-900 dark:text-gray-100;
}

.activity-log-density-cozy .activity-log-item {
    @apply min-h-[64px] px-5 py-4;
}

.activity-log-density-cozy .activity-log-item:not(:last-child)::before {
    @apply left-[30px] top-[40px];
}

@media (max-width: 640px) {
    .activity-log-header {
        @apply items-start;
    }

    .activity-log-header-actions {
        @apply flex-wrap justify-end;
    }

    .activity-log-row {
        @apply flex-col gap-1;
    }

    .activity-log-time {
        @apply mt-0 text-xs;
    }

    .activity-log-changes-popover {
        min-width: min(24rem, calc(100vw - 2rem));
    }

    .activity-log-changes-row {
        grid-template-columns: minmax(7rem, 0.8fr) minmax(7rem, 1fr) minmax(7rem, 1fr);
    }

    .activity-log-changes-table.without-previous-values .activity-log-changes-row {
        grid-template-columns: minmax(7rem, 0.8fr) minmax(7rem, 1fr);
    }
}