okooooooo/dsh-context
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(client): restyle the File Activity card layout and colors

Browse Source 
Expanded files read as contained layer-2 cards with a hairline frame, the
per-operation log hangs on a tree-guide rail under the chevron, count badges
and op tool chips become pills, and rows get roomier padding with tabular
timestamps.
This commit is contained in:
bowenliang123 committed 2026-08-26 10:32:45 +08:00
1 parent 6c56230f08
commit fefe40ff64
1 file changed
+17 -14
Download Patch File Download Diff File Expand all files Collapse all files
src/client/styles.css
+17 -14
View File
@@ -227,7 +227,8 @@ button.lc-brief-row-link { cursor: pointer; }
.lc-event-time { color: var(--dsw-alias-label-secondary); font-size: 12px; }
/*
---- File Activity card: the header chips double as purpose/form filters (the shared lc-gran toggle look with an ops count);
rows speak the browser's element-row anatomy (chevron, fact chips, right-aligned time) and expand into a per-operation log. ----
rows speak the browser's element-row anatomy (chevron, fact chips, right-aligned time) and expand into a per-operation log
on a tree-guide rail. ----
*/
.lc-fa-ctl { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lc-fa-ctl .lc-gran { margin-left: 0; }
@@ -239,29 +240,31 @@ button.lc-brief-row-link { cursor: pointer; }
.lc-fa-meta-delta { position: relative; }
.lc-fa-meta-tip { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; width: max-content; max-width: 260px; white-space: normal; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 6px 10px; font-size: 12px; line-height: 1.5; color: var(--dsw-alias-label-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; opacity: 0; transition: opacity 120ms ease; }
.lc-fa-meta-delta:hover .lc-fa-meta-tip { opacity: 1; }
.lc-fa-item { border-radius: 6px; }
.lc-fa-item-on { background: var(--dsw-alias-interactive-bg-active); }
.lc-fa-row { display: flex; align-items: center; gap: 7px; width: 100%; border: 0; background: transparent; color: var(--dsw-alias-label-primary); font: inherit; font-size: 12px; padding: 5px 6px; cursor: pointer; text-align: left; border-radius: 6px; transition: background-color 120ms ease; }
/* An expanded file reads as one contained card: layer-2 fill inside a hairline frame. */
.lc-fa-item { border: 1px solid transparent; border-radius: 8px; transition: background-color 120ms ease, border-color 120ms ease; }
.lc-fa-item-on { background: var(--dsw-alias-bg-layer-2); border-color: var(--dsw-alias-border-l1); }
.lc-fa-row { display: flex; align-items: center; gap: 7px; width: 100%; border: 0; background: transparent; color: var(--dsw-alias-label-primary); font: inherit; font-size: 12px; padding: 6px 8px; cursor: pointer; text-align: left; border-radius: 7px; transition: background-color 120ms ease; }
.lc-fa-row:hover { background: var(--dsw-alias-interactive-bg-hover); }
.lc-fa-form { flex: none; width: 16px; text-align: center; font-size: 11px; }
.lc-fa-form { flex: none; width: 16px; text-align: center; font-size: 11px; opacity: 0.85; }
.lc-fa-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-fa-path em { font-style: normal; color: var(--dsw-alias-label-secondary); }
/* Per-purpose count badges: one fixed tint per purpose (read = brand, write = success, search = warn). */
.lc-fa-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 6px; border-radius: 4px; white-space: nowrap; }
.lc-fa-badge i { display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.lc-fa-b-read { color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 15%, transparent); }
.lc-fa-b-write { color: var(--dsw-alias-state-success-primary); background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 15%, transparent); }
.lc-fa-b-search { color: var(--dsw-alias-state-warn-primary); background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 15%, transparent); }
/* Per-purpose count badges: pill chips, one fixed tint per purpose (read = brand, write = success, search = warn). */
.lc-fa-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.lc-fa-badge i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.lc-fa-b-read { color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent); }
.lc-fa-b-write { color: var(--dsw-alias-state-success-primary); background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 14%, transparent); }
.lc-fa-b-search { color: var(--dsw-alias-state-warn-primary); background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 14%, transparent); }
.lc-fa-delta { flex: none; display: inline-flex; gap: 5px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-fa-up { color: var(--dsw-alias-state-success-primary); }
.lc-fa-down { color: var(--dsw-alias-state-error-primary); }
.lc-fa-time { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; }
.lc-fa-ops { padding: 2px 6px 6px 26px; display: flex; flex-direction: column; gap: 1px; }
.lc-fa-time { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
/* The expanded op log hangs on a tree-guide rail aligned under the row chevron. */
.lc-fa-ops { margin: 0 8px 8px 15px; padding: 2px 0 2px 10px; border-left: 2px solid var(--dsw-alias-border-l1); display: flex; flex-direction: column; gap: 1px; }
.lc-fa-op { display: flex; align-items: center; gap: 8px; min-width: 0; border: 0; background: transparent; color: var(--dsw-alias-label-primary); font: inherit; font-size: 11px; padding: 3px 6px; text-align: left; border-radius: 5px; transition: background-color 120ms ease; }
.lc-fa-op-link { cursor: pointer; }
.lc-fa-op-link:hover { background: var(--dsw-alias-interactive-bg-hover); }
.lc-fa-op-time { flex: none; width: 58px; color: var(--dsw-alias-label-secondary); font-variant-numeric: tabular-nums; }
.lc-fa-op-tool { flex: none; font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); color: var(--dsw-alias-label-secondary); }
.lc-fa-op-tool { flex: none; font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); color: var(--dsw-alias-label-secondary); }
.lc-fa-op-detail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-secondary); }
.lc-fa-more { padding: 2px 6px; color: var(--dsw-alias-label-secondary); font-size: 11px; }
.lc-fa-note { margin-top: 8px; color: var(--dsw-alias-label-secondary); font-size: 12px; }