style(crm): indent and color-highlight contact sub-rows

Sub-rows now have an indigo left border, tinted background and stronger
indent to visually separate them from company rows. Dark mode variants
included. Expanded company row also gets a primary-colored left border.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Thomas Reitz 2026-03-11 20:15:19 +01:00
parent 72fd57740b
commit dbbde6c4fa

View file

@ -90,33 +90,53 @@
/* Company row when expanded */
.expandedRow {
background: var(--color-bg);
border-left: 3px solid var(--color-primary);
}
:global([data-theme='dark']) .expandedRow {
background: rgba(99, 102, 241, 0.04);
}
/* Contact sub-rows */
.subRow {
background: var(--color-bg);
background: rgba(99, 102, 241, 0.03);
border-bottom: 1px solid var(--color-border);
border-left: 3px solid rgba(99, 102, 241, 0.3);
cursor: pointer;
transition: background 0.15s;
}
.subRow:hover {
background: var(--color-bg-card);
background: rgba(99, 102, 241, 0.07);
}
:global([data-theme='dark']) .subRow {
background: rgba(99, 102, 241, 0.06);
border-left-color: rgba(129, 140, 248, 0.4);
}
:global([data-theme='dark']) .subRow:hover {
background: rgba(99, 102, 241, 0.12);
}
.subRowIndent {
padding: 0.5rem 0.5rem 0.5rem 1rem;
width: 40px;
padding: 0.5rem 0.5rem 0.5rem 2rem;
width: 56px;
position: relative;
}
.subRowConnector {
display: block;
width: 12px;
width: 16px;
height: 1px;
background: var(--color-border);
background: rgba(99, 102, 241, 0.3);
margin-left: auto;
}
:global([data-theme='dark']) .subRowConnector {
background: rgba(129, 140, 248, 0.35);
}
.subRowCell {
padding: 0.5rem 1rem;
font-size: 0.8125rem;
@ -126,7 +146,7 @@
.subRowLoading,
.subRowError,
.subRowEmpty {
padding: 0.75rem 1rem 0.75rem 3.5rem;
padding: 0.75rem 1rem 0.75rem 4.5rem;
font-size: 0.8125rem;
color: var(--color-text-muted);
font-style: italic;