336 lines
17 KiB
CSS
336 lines
17 KiB
CSS
/* OrgChart content cards, not overrides of HM React components.
|
|
Colors, typography and geometry use standalone OrgChart variables.
|
|
Observed card geometry is a minimum; text may increase the card height. */
|
|
.hm-orgchart-employee[data-card-kind] {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
width: var(--hm-orgchart-resolved-card-width-employee);
|
|
min-width: var(--hm-orgchart-resolved-card-width-employee);
|
|
min-height: var(--hm-orgchart-resolved-card-height-employee);
|
|
margin: 0;
|
|
padding: 6px;
|
|
border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-card-border, var(--hm-orgchart-current-border, var(--hm-orgchart-resolved-stroke-default)));
|
|
border-radius: var(--hm-orgchart-resolved-radius-container);
|
|
background: var(--hm-orgchart-current-card-background, var(--hm-orgchart-resolved-bg-surface));
|
|
color: var(--hm-orgchart-current-card-color, var(--hm-orgchart-resolved-fg-primary));
|
|
font-family: var(--hm-orgchart-resolved-font-family);
|
|
text-align: left;
|
|
}
|
|
.hm-orgchart-employee[data-card-kind]::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 0;
|
|
top: 0;
|
|
right: 0;
|
|
width: 42px;
|
|
height: 10px;
|
|
border-radius: 0 var(--hm-orgchart-resolved-radius-container) 0 100%;
|
|
background: var(--hm-orgchart-resolved-bg-content);
|
|
pointer-events: none;
|
|
}
|
|
.hm-orgchart-employee[data-card-kind="leader"],
|
|
.hm-orgchart-employee[data-card-kind="topLeader"] {
|
|
width: var(--hm-orgchart-resolved-card-width-leader);
|
|
min-width: var(--hm-orgchart-resolved-card-width-leader);
|
|
min-height: var(--hm-orgchart-resolved-card-height-leader);
|
|
gap: 8px;
|
|
padding: 8px;
|
|
border-top: var(--hm-orgchart-resolved-border-top-width) solid var(--hm-orgchart-card-accent, var(--hm-orgchart-current-border, var(--hm-orgchart-resolved-action-primary)));
|
|
background: var(--hm-orgchart-current-card-background, var(--hm-orgchart-resolved-bg-content));
|
|
}
|
|
.hm-orgchart-employee[data-card-kind="topLeader"] {
|
|
width: var(--hm-orgchart-resolved-card-width-top-leader);
|
|
min-width: var(--hm-orgchart-resolved-card-width-top-leader);
|
|
min-height: var(--hm-orgchart-resolved-card-height-top-leader);
|
|
border-color: var(--hm-orgchart-accent, var(--hm-orgchart-resolved-action-primary));
|
|
background: var(--hm-orgchart-current-card-background, var(--hm-orgchart-resolved-bg-surface));
|
|
}
|
|
.hm-orgchart-employee[data-card-kind] .hm-orgchart-avatar {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex: 0 0 28px;
|
|
width: 28px;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
border-radius: 3.5px;
|
|
background: var(--hm-orgchart-resolved-bg-subtle);
|
|
color: var(--hm-orgchart-resolved-fg-secondary);
|
|
font-size: 13px;
|
|
font-weight: var(--hm-orgchart-resolved-font-weight-medium);
|
|
}
|
|
.hm-orgchart-employee[data-card-kind="leader"] .hm-orgchart-avatar { flex-basis: 36px; width: 36px; height: 36px; }
|
|
.hm-orgchart-employee[data-card-kind="topLeader"] .hm-orgchart-avatar { flex-basis: 40px; width: 40px; height: 40px; }
|
|
.hm-orgchart-employee[data-card-kind] .hm-orgchart-avatar img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.hm-orgchart-employee[data-card-kind] .hm-orgchart-avatar img[data-photo-placeholder="true"] {
|
|
object-fit: contain;
|
|
background: #f1f5f8;
|
|
}
|
|
.hm-orgchart-employee[data-card-kind] .hm-orgchart-employee-details { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; }
|
|
.hm-orgchart-employee[data-card-kind] .hm-orgchart-person-name {
|
|
display: block;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
font-weight: var(--hm-orgchart-resolved-font-weight-bold);
|
|
overflow-wrap: anywhere;
|
|
word-break: normal;
|
|
}
|
|
.hm-orgchart-employee[data-card-kind] .hm-orgchart-person-role {
|
|
display: block;
|
|
font-size: 10px;
|
|
line-height: 13px;
|
|
color: var(--hm-orgchart-resolved-fg-secondary);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.hm-orgchart-employee[data-card-kind][data-has-affiliation="true"] .hm-orgchart-person-role { padding-right: 18px; }
|
|
.hm-orgchart-employee[data-card-kind] .hm-orgchart-person-attributes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 2px 4px;
|
|
}
|
|
.hm-orgchart-employee[data-card-kind] .hm-orgchart-job-title {
|
|
padding: 0 3px;
|
|
border-radius: var(--hm-orgchart-resolved-radius-control-md);
|
|
background: var(--hm-orgchart-resolved-accent);
|
|
color: var(--hm-orgchart-resolved-on-accent);
|
|
font-size: 10px;
|
|
line-height: 14px;
|
|
font-weight: var(--hm-orgchart-resolved-font-weight-medium);
|
|
overflow-wrap: anywhere;
|
|
max-width: 100%;
|
|
}
|
|
.hm-orgchart-employee[data-card-kind] .hm-orgchart-status-label {
|
|
font-size: 10px;
|
|
line-height: 14px;
|
|
color: var(--hm-orgchart-resolved-fg-secondary);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.hm-orgchart-employee[data-card-kind][data-work-status="dispatched"],
|
|
.hm-orgchart-employee[data-card-kind][data-work-status="onLeave"] { border-style: dashed; }
|
|
.hm-orgchart-employee[data-card-kind] .hm-orgchart-affiliation-mark {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 4px;
|
|
right: 4px;
|
|
width: 16px;
|
|
min-height: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--hm-orgchart-resolved-stroke-input-default);
|
|
border-radius: var(--hm-orgchart-resolved-radius-control-md);
|
|
background: var(--hm-orgchart-resolved-bg-content);
|
|
color: var(--hm-orgchart-resolved-fg-secondary);
|
|
font-size: 8px;
|
|
line-height: 12px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.hm-orgchart-affiliation-mark img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
background: transparent;
|
|
}
|
|
/* Card image boxes are 1.5 times the P3.1 display: 14 -> 21px.
|
|
Keep the 1px transparent inset; summary logos stay unchanged. */
|
|
.hm-orgchart-employee[data-card-kind] .hm-orgchart-affiliation-mark {
|
|
top: 0;
|
|
right: 0;
|
|
width: 23px;
|
|
height: 23px;
|
|
min-height: 23px;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: 1px;
|
|
}
|
|
.hm-orgchart-employee[data-card-kind] .hm-orgchart-affiliation-mark img {
|
|
inset: 1px;
|
|
width: calc(100% - 2px);
|
|
height: calc(100% - 2px);
|
|
}
|
|
.hm-orgchart-affiliation-mark[data-logo-available="true"] .hm-orgchart-affiliation-fallback { visibility: hidden; }
|
|
|
|
/* Approved SVG cards and compact read-only status cards share content layout.
|
|
Status cards retain their separate gray surface and do not receive an SVG. */
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) {
|
|
box-sizing: border-box;
|
|
width: 108px;
|
|
min-width: 108px;
|
|
height: 52px;
|
|
min-height: 52px;
|
|
padding: 4px;
|
|
gap: 4px;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"],
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] {
|
|
width: 146px;
|
|
min-width: 146px;
|
|
height: 68px;
|
|
min-height: 68px;
|
|
padding: 6px;
|
|
gap: 6px;
|
|
}
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] { height: 74px; min-height: 74px; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] { column-gap: 10px; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])::before { content: none; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-card-background {
|
|
position: absolute;
|
|
z-index: 0;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
pointer-events: none;
|
|
}
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-avatar { flex-basis: 24px; width: 24px; height: 24px; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] .hm-orgchart-avatar { flex-basis: 32px; width: 32px; height: 32px; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] .hm-orgchart-avatar { flex-basis: 36px; width: 36px; height: 36px; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) {
|
|
--hm-orgchart-person-position-color: #797979;
|
|
--hm-orgchart-person-position-size: 15px;
|
|
--hm-orgchart-person-position-line-height: 18px;
|
|
--hm-orgchart-person-position-letter-spacing: -0.6px;
|
|
--hm-orgchart-person-name-size: 18px;
|
|
--hm-orgchart-person-name-line-height: 24px;
|
|
--hm-orgchart-person-name-letter-spacing: -0.8px;
|
|
}
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"],
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] {
|
|
--hm-orgchart-person-position-size: 20px;
|
|
--hm-orgchart-person-position-line-height: 22px;
|
|
--hm-orgchart-person-position-letter-spacing: -0.8px;
|
|
--hm-orgchart-person-name-size: 24px;
|
|
--hm-orgchart-person-name-line-height: 30px;
|
|
--hm-orgchart-person-name-letter-spacing: -0.96px;
|
|
}
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] {
|
|
--hm-orgchart-person-position-color: #224387;
|
|
--hm-orgchart-person-name-letter-spacing: -0.8px;
|
|
}
|
|
.hm-orgchart-employee[data-card-asset][data-card-asset-size="leader"] { --hm-orgchart-person-position-size: 18px; }
|
|
/* Retain the status border while matching the approved small photo/text origins. */
|
|
.hm-orgchart-employee[data-card-layout="compact"] { padding: 3px; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-text { display: flex; flex-direction: column; gap: 0; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-position-row { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-position-row .hm-orgchart-person-role { flex: 0 0 auto; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-position-row .hm-orgchart-job-title { flex: 0 0 auto; margin: 0; }
|
|
/* The source's compact tag shares the position row. Align its lower edge with
|
|
that row so long raw tags clear the unchanged upper-right affiliation logo
|
|
within the approved 146px cards; row/name gap and typography stay intact. */
|
|
.hm-orgchart-employee[data-workdesk-presentation="true"][data-card-asset="integrated-system"][data-card-asset-size="leader"] .hm-orgchart-position-row .hm-orgchart-job-title { align-self: flex-end; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-role,
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name { margin: 0; padding: 0; white-space: nowrap; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-has-affiliation="true"] .hm-orgchart-person-role { padding: 0; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-role {
|
|
color: var(--hm-orgchart-card-position-color, var(--hm-orgchart-person-position-color));
|
|
font-size: var(--hm-orgchart-person-position-size);
|
|
font-weight: 400;
|
|
line-height: var(--hm-orgchart-person-position-line-height);
|
|
letter-spacing: var(--hm-orgchart-person-position-letter-spacing);
|
|
}
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name {
|
|
color: var(--hm-orgchart-card-color, #071D3A);
|
|
font-size: var(--hm-orgchart-person-name-size);
|
|
font-weight: 700;
|
|
line-height: var(--hm-orgchart-person-name-line-height);
|
|
letter-spacing: var(--hm-orgchart-person-name-letter-spacing);
|
|
overflow: hidden;
|
|
text-overflow: clip;
|
|
}
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name[data-name-overflow="true"] { text-overflow: ellipsis; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-person-name { color: var(--hm-orgchart-card-color, #323232); }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name:focus-visible { outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus); outline-offset: 1px; }
|
|
.hm-orgchart-employee[data-card-asset-size="employee"] .hm-orgchart-affiliation-mark { top: 2px; right: 1px; width: 20px; height: 20px; min-height: 20px; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-affiliation-fallback { font-size: 6px; white-space: nowrap; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-attributes { position: absolute; z-index: 1; left: 3px; bottom: 3px; width: 28px; justify-content: center; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] .hm-orgchart-person-attributes,
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] .hm-orgchart-person-attributes { left: 4px; width: 36px; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-job-title { max-width: 100%; padding: 0 2px; font-size: 8px; line-height: 12px; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] .hm-orgchart-job-title { font-size: 9px; font-weight: 700; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-job-title { font-size: 8.5px; font-weight: 500; }
|
|
/* Workdesk source: index.css .rank-position/.role-rank and .bg-*.
|
|
Preserve the approved SVG geometry and position/name typography. The photo
|
|
slot uses the existing reserved width because the approved cards are smaller
|
|
than Workdesk's source cards; missing photos use the shared neutral icon. */
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]),
|
|
.hm-orgchart-employee[data-workdesk-presentation="true"] {
|
|
--hm-orgchart-role-tag-color: #0e5492;
|
|
--hm-orgchart-role-tag-background: rgba(14, 84, 146, 0.08);
|
|
--hm-orgchart-role-tag-border: rgba(14, 84, 146, 0.2);
|
|
}
|
|
.hm-orgchart-employee[data-card-asset="business-planning"] {
|
|
--hm-orgchart-role-tag-color: #254e7e;
|
|
--hm-orgchart-role-tag-background: rgba(37, 78, 126, 0.1);
|
|
--hm-orgchart-role-tag-border: rgba(37, 78, 126, 0.26);
|
|
}
|
|
.hm-orgchart-employee[data-card-asset="talent-growth"] {
|
|
--hm-orgchart-role-tag-color: #0e67c8;
|
|
--hm-orgchart-role-tag-background: rgba(14, 103, 200, 0.1);
|
|
--hm-orgchart-role-tag-border: rgba(14, 103, 200, 0.26);
|
|
}
|
|
.hm-orgchart-employee[data-card-asset="integrated-system"] {
|
|
--hm-orgchart-role-tag-color: #6e47a0;
|
|
--hm-orgchart-role-tag-background: rgba(110, 71, 160, 0.1);
|
|
--hm-orgchart-role-tag-border: rgba(110, 71, 160, 0.26);
|
|
}
|
|
.hm-orgchart-employee[data-card-asset="design-planning"] {
|
|
--hm-orgchart-role-tag-color: #069a95;
|
|
--hm-orgchart-role-tag-background: rgba(6, 154, 149, 0.1);
|
|
--hm-orgchart-role-tag-border: rgba(6, 154, 149, 0.26);
|
|
}
|
|
.hm-orgchart-employee[data-card-asset="solution-sales"] {
|
|
--hm-orgchart-role-tag-color: #518b35;
|
|
--hm-orgchart-role-tag-background: rgba(81, 139, 53, 0.1);
|
|
--hm-orgchart-role-tag-border: rgba(81, 139, 53, 0.26);
|
|
}
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-avatar,
|
|
.hm-orgchart-employee[data-workdesk-presentation="true"] .hm-orgchart-avatar {
|
|
border-radius: 3.5px;
|
|
background: transparent;
|
|
}
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-avatar { height: 44px; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] .hm-orgchart-avatar { height: 56px; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] .hm-orgchart-avatar { height: 62px; }
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-job-title,
|
|
.hm-orgchart-employee[data-workdesk-presentation="true"] .hm-orgchart-job-title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 13px;
|
|
padding: 0 3px;
|
|
border: 1px solid var(--hm-orgchart-role-tag-border);
|
|
border-radius: 4px;
|
|
background: var(--hm-orgchart-role-tag-background);
|
|
color: var(--hm-orgchart-role-tag-color);
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
}
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-job-title {
|
|
padding: 0 2px;
|
|
font-size: 8.5px;
|
|
font-weight: 500;
|
|
}
|
|
/* Status is retained for assistive reading; the specified two-line card
|
|
composition has no third status row. Supplementary status cards are intact. */
|
|
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-status-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
|
|
.hm-orgchart-person-name-tooltip { position: fixed; z-index: 10; box-sizing: border-box; max-width: min(320px, calc(100vw - 16px)); padding: 6px 8px; border: 1px solid #224387; border-radius: 4px; background: #ffffff; color: #071D3A; font-family: var(--hm-orgchart-resolved-font-family); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; pointer-events: auto; }
|
|
.hm-orgchart-person-name-tooltip[hidden] { display: none; }
|