156 lines
12 KiB
CSS
156 lines
12 KiB
CSS
/* Content composition only; no Header/Navigation or HM component overrides. */
|
|
/* Full Composition: Scale wrapper (.hm-orgchart-composition) > Base Stage (.hm-orgchart-stage).
|
|
The stage keeps its natural width (tree + side) and is uniformly scaled by Core JS;
|
|
there is no reflow breakpoint and no inner horizontal scroll. Column/group gaps are
|
|
screen-only layout values (no data or parentId change). */
|
|
.hm-orgchart-composition { position: relative; width: 100%; min-width: 0; overflow: hidden; }
|
|
.hm-orgchart-stage {
|
|
/* Engine padding (32px) + node margins (16px) already separate the six 252px
|
|
organization columns; the tree wrapper adds no extra width. */
|
|
--hm-orgchart-column-gap: 0px;
|
|
display: grid;
|
|
grid-template-columns: max-content 330px;
|
|
column-gap: var(--hm-orgchart-resolved-spacing-xl);
|
|
align-items: start;
|
|
width: max-content;
|
|
transform-origin: 0 0;
|
|
}
|
|
.hm-orgchart-composition-no-side .hm-orgchart-stage { grid-template-columns: max-content; }
|
|
/* Stage-level rows: intro/hub are centered on the whole stage (tree + side). */
|
|
.hm-orgchart-main { display: contents; }
|
|
.hm-orgchart-slot-side, .hm-orgchart-slot-footer, .hm-orgchart-slot-belowTree { min-width: 0; }
|
|
.hm-orgchart-slot-side { grid-column: 2; grid-row: 1 / span 4; }
|
|
.hm-orgchart-slot-footer { grid-column: 1 / -1; grid-row: 5; margin-top: 16px; contain: inline-size; }
|
|
.hm-orgchart-slot-side, .hm-orgchart-slot-footer, .hm-orgchart-slot-belowTree { display: grid; gap: 16px; }
|
|
.hm-orgchart-slot-belowTree { grid-column: 1; grid-row: 4; margin-top: 16px; contain: inline-size; }
|
|
.hm-orgchart-intro { grid-column: 1 / -1; grid-row: 1; contain: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 16px; }
|
|
.hm-orgchart-intro .hm-orgchart-heading { grid-column: 1; }
|
|
.hm-orgchart-top-leaders { grid-column: 2; display: flex; justify-content: center; gap: 12px; }
|
|
.hm-orgchart-hub {
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
position: relative;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
margin: 28px auto 18px;
|
|
z-index: 1;
|
|
padding: 8px 20px;
|
|
border-radius: var(--hm-orgchart-resolved-radius-pill);
|
|
background: var(--hm-orgchart-resolved-bg-brand);
|
|
color: var(--hm-orgchart-resolved-on-action-primary);
|
|
font-weight: var(--hm-orgchart-resolved-font-weight-bold);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.hm-orgchart-hub::before, .hm-orgchart-hub::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
height: 18px;
|
|
border-left: 1px dashed var(--hm-orgchart-resolved-stroke-default);
|
|
pointer-events: none;
|
|
}
|
|
.hm-orgchart-hub::before { bottom: 100%; }
|
|
.hm-orgchart-hub::after { top: 100%; }
|
|
/* Stage 4: hub-to-organization branch lines (visual only, not data relations).
|
|
Each top-level tree draws its own bar segment so the six branches read as one row. */
|
|
.hm-orgchart-main > .hm-orgchart-viewport { grid-column: 1; grid-row: 3; overflow: visible; padding-top: 0; border-top-color: transparent; border-radius: 0 0 var(--hm-orgchart-resolved-radius-container) var(--hm-orgchart-resolved-radius-container); }
|
|
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-forest { align-items: flex-start; justify-content: flex-start; }
|
|
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree { position: relative; padding: 18px calc(var(--hm-orgchart-column-gap) / 2) 0; }
|
|
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree::before,
|
|
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree::after { content: ''; position: absolute; top: 0; pointer-events: none; border-top: 1px dashed var(--hm-orgchart-resolved-stroke-default); }
|
|
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree::before { left: 0; right: 0; }
|
|
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree:first-child::before { left: 50%; }
|
|
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree:last-child::before { right: 50%; }
|
|
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree:only-child::before { display: none; }
|
|
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree::after { left: 50%; height: 18px; border-top: 0; border-left: 1px dashed var(--hm-orgchart-resolved-stroke-default); }
|
|
/* Six top branches are siblings supplied by the data. Deeper cells/teams stack
|
|
inside their branch, with engine hierarchy and collapse behavior intact. */
|
|
.hm-orgchart-engine.orgchart .node[data-depth] { width: 204px; }
|
|
.hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-organization {
|
|
width: 204px;
|
|
padding: 10px;
|
|
background: var(--hm-orgchart-current-card-background);
|
|
border-top: var(--hm-orgchart-resolved-border-top-width) solid var(--hm-orgchart-group-border, var(--hm-orgchart-current-border));
|
|
}
|
|
.hm-orgchart-engine.orgchart .node[data-depth="0"] { width: 244px; }
|
|
.hm-orgchart-engine.orgchart .node[data-depth="0"] .hm-orgchart-organization { width: 244px; }
|
|
.hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth="1"]) > .nodes,
|
|
.hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth="2"]) > .nodes,
|
|
.hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth="3"]) > .nodes { flex-direction: column; align-items: center; }
|
|
/* Stacked siblings: the engine's horizontal sibling bar becomes a vertical
|
|
spine through the 20px engine node margin above each cell/team. */
|
|
.hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth="1"]) > .nodes > .hierarchy::before,
|
|
.hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth="2"]) > .nodes > .hierarchy::before,
|
|
.hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth="3"]) > .nodes > .hierarchy::before { top: -20px; left: calc(50% - 1px); width: 2px; height: 20px; border-width: 0 0 0 2px; }
|
|
/* Stage 3 headers. Colors come from the per-organization preset variables;
|
|
sizes are DESIGN_ADAPTATION (Workdesk computed size/padding NOT VERIFIED). */
|
|
.hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-organization-name {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 8px 0 0;
|
|
text-align: center;
|
|
border-radius: var(--hm-orgchart-resolved-radius-container);
|
|
color: var(--hm-orgchart-group-title-color, var(--hm-orgchart-current-department-color));
|
|
}
|
|
.hm-orgchart-engine.orgchart .node[data-header-role="organization"] .hm-orgchart-organization-name {
|
|
min-height: var(--hm-orgchart-title-height, 40px);
|
|
padding: 6px 12px;
|
|
background: var(--hm-orgchart-group-title-background, var(--hm-orgchart-group-background));
|
|
font-size: var(--hm-orgchart-title-font-size, 18px);
|
|
font-weight: var(--hm-orgchart-resolved-font-weight-bold);
|
|
line-height: var(--hm-orgchart-title-line-height, 26px);
|
|
}
|
|
.hm-orgchart-engine.orgchart .node[data-header-role="group"] .hm-orgchart-organization-name {
|
|
min-height: var(--hm-orgchart-group-header-height, 32px);
|
|
padding: 4px 8px;
|
|
background: var(--hm-orgchart-group-title-background, var(--hm-orgchart-current-border));
|
|
font-size: var(--hm-orgchart-group-header-font-size, 14px);
|
|
font-weight: var(--hm-orgchart-resolved-font-weight-bold);
|
|
line-height: var(--hm-orgchart-group-header-line-height, 20px);
|
|
}
|
|
.hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-leader { margin: 10px auto; }
|
|
.hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
|
|
.hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee { flex-shrink: 0; }
|
|
.hm-orgchart-preview-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
|
|
.hm-orgchart-card-specimen { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; }
|
|
.hm-orgchart-card-caption { margin: 0; max-width: 180px; font-size: 11px; line-height: 16px; text-align: center; }
|
|
.hm-orgchart-component-cards { min-width: 0; }
|
|
.hm-orgchart-logo-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--hm-orgchart-resolved-spacing-lg); padding: 0; list-style: none; }
|
|
.hm-orgchart-logo-list li { display: flex; flex-direction: column; align-items: center; gap: var(--hm-orgchart-resolved-spacing-sm); padding: var(--hm-orgchart-resolved-spacing-lg); border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-resolved-stroke-default); border-radius: var(--hm-orgchart-resolved-radius-container); }
|
|
.hm-orgchart-logo-list .hm-orgchart-affiliation-mark { position: relative; width: 96px; height: 96px; }
|
|
.hm-orgchart-department-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--hm-orgchart-resolved-spacing-lg); }
|
|
.hm-orgchart-department-colors > p { grid-column: 1 / -1; }
|
|
.hm-orgchart-representative-preview { grid-column: 1 / -1; }
|
|
.hm-orgchart-color-preview { min-width: 0; padding: var(--hm-orgchart-resolved-spacing-lg); border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-current-border); border-radius: var(--hm-orgchart-resolved-radius-container); background: var(--hm-orgchart-current-card-background); overflow-wrap: anywhere; }
|
|
/* Align title, provenance, legend, cards and contrast blocks across each row
|
|
of specimens even when their descriptions wrap to different heights. */
|
|
.hm-orgchart-color-preview { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
|
|
.hm-orgchart-color-department-name { display: flex; align-items: center; justify-content: center; min-height: var(--hm-orgchart-title-height, 40px); padding: 6px 12px; font-size: var(--hm-orgchart-title-font-size, 18px); line-height: var(--hm-orgchart-title-line-height, 26px); font-weight: var(--hm-orgchart-resolved-font-weight-bold); background: var(--hm-orgchart-current-gradient); color: var(--hm-orgchart-current-department-color); border-radius: var(--hm-orgchart-resolved-radius-container); }
|
|
.hm-orgchart-color-legend { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--hm-orgchart-resolved-spacing-sm); }
|
|
.hm-orgchart-color-legend dd { margin: 0; display: grid; gap: 4px; }
|
|
.hm-orgchart-color-swatch { display: block; width: 44px; height: 22px; border: 1px solid var(--hm-orgchart-resolved-stroke-default); }
|
|
.hm-orgchart-color-swatch-card-background { background-color: var(--hm-orgchart-current-card-background); }
|
|
.hm-orgchart-color-swatch-card-color { color: var(--hm-orgchart-current-card-color); }
|
|
.hm-orgchart-color-swatch-department-color { color: var(--hm-orgchart-current-department-color); }
|
|
.hm-orgchart-color-swatch-border { background-color: var(--hm-orgchart-current-border); }
|
|
.hm-orgchart-color-swatch-gradient { background-image: var(--hm-orgchart-current-gradient); }
|
|
.hm-orgchart-color-swatch[data-css-property="color"] { text-align: center; font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
|
|
.hm-orgchart-contrast-normal, .hm-orgchart-contrast-candidate, .hm-orgchart-contrast-chip {
|
|
margin: var(--hm-orgchart-resolved-spacing-sm) 0;
|
|
padding: 4px 8px;
|
|
font-size: 15px;
|
|
font-weight: var(--hm-orgchart-resolved-font-weight-bold);
|
|
line-height: 22px;
|
|
border-radius: var(--hm-orgchart-resolved-radius-container);
|
|
background: var(--hm-orgchart-current-gradient);
|
|
color: var(--hm-orgchart-current-department-color);
|
|
}
|
|
.hm-orgchart-contrast-candidate { color: var(--hm-orgchart-contrast-candidate-color, #10243b); }
|
|
.hm-orgchart-contrast-chip-label { display: inline-block; background: var(--hm-orgchart-contrast-candidate-chip-background, #ffffff); color: var(--hm-orgchart-contrast-candidate-color, #10243b); padding: 0 4px; border-radius: var(--hm-orgchart-resolved-radius-control-md); }
|
|
.hm-orgchart-contrast-comparison { min-width: 0; }
|
|
.hm-orgchart-contrast-results { margin: var(--hm-orgchart-resolved-spacing-sm) 0; }
|
|
.hm-orgchart-contrast-results dd { margin-left: 0; }
|
|
.hm-orgchart-contrast-result, .hm-orgchart-contrast-stops { margin: var(--hm-orgchart-resolved-spacing-xs) 0; }
|