.activity-feed {
container-type: inline-size;
}
.activity-feed:focus {
outline: none;
}
.act-loading,
.act-empty,
.act-note {
margin: 0 0 var(--space-md);
color: var(--color-text-muted);
font-size: var(--font-size-md);
line-height: 1.55;
}
.act-note {
padding: 10px 14px;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-border) 18%, transparent);
font-size: var(--font-size-sm);
}
.act-sitting + .act-sitting {
margin-block-start: var(--space-lg);
}
.act-sitting--device + .act-sitting--device,
.act-sitting + .act-sitting--device {
margin-block-start: var(--space-xl);
padding-block-start: var(--space-md);
border-block-start: 1px solid var(--color-border);
}
.act-device {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 var(--space-sm);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text);
}
.act-device .fas {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
}
.act-sitting__when {
margin: 0 0 var(--space-sm);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text-muted);
}
.act-sitting__when span {
font-weight: 400;
font-variant-numeric: tabular-nums;
}
.act-cards {
display: grid;
gap: var(--space-sm);
margin: 0;
padding: 0;
list-style: none;
}
@container (width > 640px) {
.act-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.act-card {
position: relative;
display: flex;
min-inline-size: 0;
border: 1px solid var(--paper-edge);
border-radius: var(--radius-lg);
background: var(--paper-surface);
box-shadow: var(--paper-shadow);
}
.act-card__link {
flex: 1 1 auto;
display: flex;
gap: 14px;
min-inline-size: 0;
padding: 14px 52px 14px 16px;
border-radius: inherit;
color: var(--color-text);
text-decoration: none;
transition: background-color var(--transition-fast);
}
.act-card__link:hover {
background: var(--color-surface-hover);
}
.act-card__link:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.act-card__icon {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
inline-size: 40px;
block-size: 40px;
border-radius: var(--radius-md);
background: var(--color-primary-active-bg);
color: var(--color-primary);
font-size: var(--font-size-md);
}
.act-card__body {
display: flex;
flex-direction: column;
gap: 2px;
min-inline-size: 0;
}
.act-card__kicker {
font-size: var(--font-size-2xs);
font-weight: 600;
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.act-card__title {
font-family: var(--font-title-serif);
font-weight: 600;
font-size: calc(var(--font-size-lg) * var(--title-serif-scale));
line-height: 1.25;
overflow-wrap: anywhere;
}
.act-card__detail {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
overflow-wrap: anywhere;
}
.act-card__progress {
font-size: var(--font-size-sm);
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.act-card__meta {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.act-card__cta {
align-self: flex-start;
margin-block-start: 6px;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-primary);
font-variant-numeric: tabular-nums;
}
.act-card__cta .fas {
font-size: 0.8em;
margin-inline-start: 2px;
}
.act-card__forget {
position: absolute;
inset-block-start: 8px;
inset-inline-end: 8px;
display: inline-grid;
place-items: center;
inline-size: 36px;
block-size: 36px;
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.act-card__forget:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.act-card__forget:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.act-more {
display: block;
margin: var(--space-lg) auto 0;
padding: 10px 18px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.act-more:hover {
background: var(--color-surface-hover);
}
.act-more:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
@container (width <= 480px) {
.act-card__link {
gap: 12px;
padding: 12px 48px 12px 12px;
}
.act-card__icon {
inline-size: 36px;
block-size: 36px;
}
}