mirror of
http://172.20.10.11:3000/gitadmin/INSIGHT-MVP.git
synced 2026-06-25 03:26:40 +02:00
219863d538
Lexware contact linking is not relevant for individual contacts, only for companies. Removed LexwareSection component and the two-column topRow grid layout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
255 lines
4.4 KiB
CSS
255 lines
4.4 KiB
CSS
/* ============================================================
|
||
ContactDetailPage – Layout & Komponenten
|
||
============================================================ */
|
||
|
||
/* ---- Navigation ---- */
|
||
.backLink {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
color: var(--color-text-muted);
|
||
text-decoration: none;
|
||
font-size: 0.875rem;
|
||
margin-bottom: 1rem;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.backLink:hover {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
/* ---- Header ---- */
|
||
.header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
margin-bottom: 1.5rem;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.headerLeft {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.75rem;
|
||
min-width: 0;
|
||
}
|
||
|
||
.nameRow {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.name {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.nameCompany {
|
||
font-size: 1.125rem;
|
||
font-weight: 400;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 0.9375rem;
|
||
color: var(--color-text-muted);
|
||
margin: 0.25rem 0 0;
|
||
}
|
||
|
||
/* ---- Status badges ---- */
|
||
.badgeActive {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
padding: 0.1875rem 0.5rem;
|
||
background: #dcfce7;
|
||
color: #166534;
|
||
border-radius: 9999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.badgeActive::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: #16a34a;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.badgeInactive {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
padding: 0.1875rem 0.5rem;
|
||
background: #fee2e2;
|
||
color: #991b1b;
|
||
border-radius: 9999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.badgeInactive::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: #dc2626;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
/* ---- Card ---- */
|
||
.card {
|
||
background: var(--color-bg-card);
|
||
border-radius: var(--radius-md);
|
||
box-shadow: var(--shadow-sm);
|
||
border: 1px solid var(--color-border);
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.cardTitle {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
margin: 0 0 1rem 0;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
/* ---- Two-column info layout inside a card ---- */
|
||
.infoColumns {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0.25rem 2rem;
|
||
align-items: start;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.infoColumns {
|
||
grid-template-columns: 1fr;
|
||
gap: 0;
|
||
}
|
||
}
|
||
|
||
/* ---- Info grid (label | value pairs) ---- */
|
||
.infoGrid {
|
||
display: grid;
|
||
grid-template-columns: 100px 1fr;
|
||
gap: 0.5rem 0.75rem;
|
||
font-size: 0.875rem;
|
||
align-content: start;
|
||
}
|
||
|
||
.infoLabel {
|
||
color: var(--color-text-muted);
|
||
font-weight: 500;
|
||
padding-top: 0.0625rem; /* optical alignment */
|
||
}
|
||
|
||
.infoValue {
|
||
color: var(--color-text);
|
||
word-break: break-word;
|
||
}
|
||
|
||
.empty {
|
||
color: var(--color-text-muted);
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* ---- Address row (full-width below infoColumns) ---- */
|
||
.addressRow {
|
||
margin-top: 1rem;
|
||
padding-top: 1rem;
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
/* ---- Tags ---- */
|
||
.tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.375rem;
|
||
}
|
||
|
||
.tag {
|
||
display: inline-block;
|
||
padding: 0.125rem 0.5rem;
|
||
background: var(--color-primary-light, #dbeafe);
|
||
color: var(--color-primary, #1a56db);
|
||
border-radius: 9999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ---- Timeline ---- */
|
||
.timeline {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
|
||
.timelineItem {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
padding: 0.75rem 0;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.timelineItem:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.timelineIcon {
|
||
flex-shrink: 0;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.timelineContent {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.timelineSubject {
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.timelineMeta {
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-muted);
|
||
margin-top: 0.125rem;
|
||
}
|
||
|
||
.timelineDesc {
|
||
font-size: 0.8125rem;
|
||
color: var(--color-text-secondary);
|
||
margin-top: 0.375rem;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
/* ---- Notes ---- */
|
||
.notesText {
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-secondary);
|
||
white-space: pre-wrap;
|
||
line-height: 1.5;
|
||
margin: 0;
|
||
}
|