gitadmin/INSIGHT-MVP
1
0
Fork 0
mirror of http://172.20.10.11:3000/gitadmin/INSIGHT-MVP.git synced 2026-06-25 03:26:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
1 changed files with 27 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/frontend/src/crm/companies/CompaniesPage.module.css
View file

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