feat(org-chart): finalize chart features and AI generation rules
This commit is contained in:
shkim4 committed
1 parent
7614507583
commit
d0828a7ff4
80 files changed
+8152
-221
No files matched your search
@@ -6,8 +6,7 @@
|
||||
}
|
||||
.hm-orgchart-organization-link:hover { text-decoration: underline; }
|
||||
.hm-orgchart-organization-link:focus-visible,
|
||||
.hm-orgchart-employee[role="button"]:focus-visible,
|
||||
.hm-orgchart-employee-dialog-close:focus-visible {
|
||||
.hm-orgchart-employee[role="button"]:focus-visible {
|
||||
outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
@@ -27,16 +26,54 @@
|
||||
.hm-orgchart-employee-dialog::backdrop {
|
||||
background: color-mix(in srgb, var(--hm-orgchart-resolved-fg-primary) 38%, transparent);
|
||||
}
|
||||
.hm-orgchart-employee-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: var(--hm-orgchart-resolved-spacing-lg); }
|
||||
.hm-orgchart-employee-dialog-header {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: var(--hm-orgchart-resolved-spacing-lg);
|
||||
/* Reserve the former text button's height so the title, body and dialog size stay put. */
|
||||
min-height: calc(1lh + 2 * var(--hm-orgchart-resolved-spacing-xs) + 2 * var(--hm-orgchart-resolved-border-width));
|
||||
}
|
||||
.hm-orgchart-employee-dialog-header h2 { margin: 0; font-size: 18px; font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
|
||||
.hm-orgchart-employee-dialog-close {
|
||||
padding: var(--hm-orgchart-resolved-spacing-xs) var(--hm-orgchart-resolved-spacing-sm);
|
||||
border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-resolved-stroke-default);
|
||||
border-radius: var(--hm-orgchart-resolved-radius-control-md);
|
||||
background: var(--hm-orgchart-resolved-bg-content);
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
/* Match HM Dialog's ghost / icon-sm Button without a React or theme dependency.
|
||||
Fallbacks are the declared HM defaults (theme/default.css and primitives.css). */
|
||||
--hm-orgchart-dialog-close-ink: var(--foreground, var(--hm-sem-fg-primary, #0a221d));
|
||||
--hm-orgchart-dialog-close-hover: var(--muted, var(--hm-sem-bg-subtle, #f4f1ea));
|
||||
--hm-orgchart-dialog-close-ring: var(--ring, var(--hm-sem-stroke-input-focus, #266651));
|
||||
position: absolute;
|
||||
top: calc(var(--spacing, .25rem) * 2);
|
||||
right: calc(var(--spacing, .25rem) * 2);
|
||||
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
width: calc(var(--spacing, .25rem) * 7);
|
||||
height: calc(var(--spacing, .25rem) * 7);
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: min(var(--radius-md, calc(var(--radius, var(--hm-radius-container, 4px)) * .8)), 12px);
|
||||
background: transparent;
|
||||
background-clip: padding-box;
|
||||
color: var(--hm-orgchart-dialog-close-ink);
|
||||
font: inherit; font-size: .875rem; line-height: calc(var(--spacing, .25rem) * 5); font-weight: 500;
|
||||
outline: none; outline-offset: 0; box-shadow: none;
|
||||
cursor: default; user-select: none; white-space: nowrap;
|
||||
transition: all 150ms cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
.hm-orgchart-employee-dialog-close svg {
|
||||
width: calc(var(--spacing, .25rem) * 4);
|
||||
height: calc(var(--spacing, .25rem) * 4);
|
||||
pointer-events: none; flex-shrink: 0;
|
||||
}
|
||||
.hm-orgchart-employee-dialog-close:hover {
|
||||
background-color: var(--hm-orgchart-dialog-close-hover);
|
||||
}
|
||||
:host-context(.dark) .hm-orgchart-employee-dialog-close:hover,
|
||||
.dark .hm-orgchart-employee-dialog-close:hover {
|
||||
background-color: color-mix(in oklab, var(--hm-orgchart-dialog-close-hover) 50%, transparent);
|
||||
}
|
||||
.hm-orgchart-employee-dialog-close:focus-visible {
|
||||
border-color: var(--hm-orgchart-dialog-close-ring);
|
||||
box-shadow: 0 0 0 3px color-mix(in oklab, var(--hm-orgchart-dialog-close-ring) 50%, transparent);
|
||||
}
|
||||
.hm-orgchart-employee-dialog-close:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
.hm-orgchart-employee-dialog-fields {
|
||||
display: grid;
|
||||
|
||||
@@ -124,6 +124,9 @@
|
||||
.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; }
|
||||
|
||||
@@ -14,7 +14,10 @@
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: var(--hm-orgchart-resolved-spacing-lg);
|
||||
background: var(--hm-orgchart-resolved-bg-content);
|
||||
/* Optional host review frame inputs affect only this outer Auto container. */
|
||||
background: var(--hm-orgchart-expanded-preview-background, var(--hm-orgchart-resolved-bg-content));
|
||||
border: var(--hm-orgchart-expanded-preview-border, 0);
|
||||
border-radius: var(--hm-orgchart-expanded-preview-radius, 0);
|
||||
}
|
||||
.hm-orgchart-expanded .hm-orgchart-heading { margin: 0; }
|
||||
.hm-orgchart-expanded .hm-orgchart-viewport {
|
||||
@@ -69,7 +72,7 @@
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
background: var(--hm-orgchart-expanded-primary);
|
||||
color: var(--hm-orgchart-expanded-title-ink);
|
||||
color: #ffffff;
|
||||
font-size: var(--hm-orgchart-resolved-font-size-base);
|
||||
font-weight: var(--hm-orgchart-resolved-font-weight-bold);
|
||||
line-height: 1.5;
|
||||
@@ -143,7 +146,7 @@
|
||||
}
|
||||
.hm-orgchart-expanded-toggle:not(:disabled):hover,
|
||||
.hm-orgchart-expanded-link:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
|
||||
.hm-orgchart-expanded-toggle:disabled { cursor: default; opacity: 0.75; }
|
||||
.hm-orgchart-expanded-toggle:is(:disabled, [aria-disabled="true"]) { cursor: default; opacity: 0.75; }
|
||||
.hm-orgchart-expanded-link { display: inline-flex; align-items: center; padding-inline: var(--hm-orgchart-resolved-spacing-sm); color: inherit; }
|
||||
.hm-orgchart-expanded-toggle:focus-visible, .hm-orgchart-expanded-link:focus-visible,
|
||||
.hm-orgchart-expanded-toolbar button:focus-visible {
|
||||
@@ -161,6 +164,7 @@
|
||||
.hm-orgchart-expanded-selection, .hm-orgchart-top-node-title { margin: 0; }
|
||||
.hm-orgchart-expanded-empty { padding: var(--hm-orgchart-resolved-spacing-lg); }
|
||||
.hm-orgchart-expanded .hm-orgchart-viewport[data-dragging] { cursor: grabbing; user-select: none; }
|
||||
.hm-orgchart-expanded .hm-orgchart-viewport[data-pan-enabled="false"] { cursor: default; }
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] { cursor: default; }
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees[data-connection-direction="left"],
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees[data-connection-direction="right"] {
|
||||
@@ -198,3 +202,74 @@
|
||||
.hm-orgchart-expanded .hm-orgchart-person-text { gap: var(--hm-orgchart-expanded-person-gap); }
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-person-name { font-size: var(--hm-orgchart-expanded-name-size); font-weight: var(--hm-orgchart-expanded-name-weight); }
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-person-role { font-size: var(--hm-orgchart-expanded-position-size); }
|
||||
|
||||
/* P7: direction/vertical adapters keep dabeng's recursive hierarchy and the
|
||||
existing HM card geometry. Plain TB continues to use its original rules. */
|
||||
.hm-orgchart-expanded .hm-orgchart-tree { position: relative; flex: none; }
|
||||
.hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-forest { flex-direction: column; }
|
||||
.hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart.l2r {
|
||||
position: relative; transform: none; transform-origin: 0 0;
|
||||
}
|
||||
.hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart .hierarchy {
|
||||
display: flex; flex-direction: row; align-items: center;
|
||||
}
|
||||
.hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes {
|
||||
flex-direction: column; align-items: flex-start;
|
||||
}
|
||||
.hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart .node[data-depth] {
|
||||
flex: none; height: auto; min-height: 0;
|
||||
margin: calc(var(--hm-orgchart-expanded-sibling-gap) / 2) var(--hm-orgchart-expanded-level-gap) calc(var(--hm-orgchart-expanded-sibling-gap) / 2) 0;
|
||||
}
|
||||
.hm-orgchart-expanded[data-auto-layout="lr"] .hm-orgchart-engine.orgchart .node[data-depth] > .hm-orgchart-organization {
|
||||
margin-inline: auto; padding-inline: var(--hm-orgchart-resolved-spacing-xxl);
|
||||
}
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical,
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .nodes,
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth]) > .nodes.vertical {
|
||||
display: flex; flex-direction: column; align-items: flex-start;
|
||||
width: max-content; padding-left: var(--hm-orgchart-resolved-spacing-xxl);
|
||||
gap: calc(var(--hm-orgchart-expanded-level-gap) / 2);
|
||||
}
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .nodes {
|
||||
padding-top: calc(var(--hm-orgchart-expanded-level-gap) / 2);
|
||||
}
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .hierarchy:has(> .node[data-depth]) > .nodes {
|
||||
flex-direction: column; align-items: flex-start;
|
||||
}
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .node[data-depth] {
|
||||
margin: 0; min-height: 0;
|
||||
}
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .nodes.vertical .node[data-depth] > .hm-orgchart-organization {
|
||||
padding-inline: var(--hm-orgchart-resolved-spacing-xxl);
|
||||
}
|
||||
/* Measured Auto connector routes replace upstream fixed-card pseudo geometry
|
||||
in LR/global Hybrid/TB per-group Hybrid only. */
|
||||
.hm-orgchart-expanded:is([data-auto-layout="lr"], [data-auto-layout="hybrid"], [data-group-hybrid="true"]) .hm-orgchart-engine.orgchart .hierarchy::before,
|
||||
.hm-orgchart-expanded:is([data-auto-layout="lr"], [data-auto-layout="hybrid"], [data-group-hybrid="true"]) .hm-orgchart-engine.orgchart .hierarchy::after,
|
||||
.hm-orgchart-expanded:is([data-auto-layout="lr"], [data-auto-layout="hybrid"], [data-group-hybrid="true"]) .hm-orgchart-engine.orgchart .node[data-depth]::before,
|
||||
.hm-orgchart-expanded:is([data-auto-layout="lr"], [data-auto-layout="hybrid"], [data-group-hybrid="true"]) .hm-orgchart-engine.orgchart .node[data-depth]::after {
|
||||
content: none;
|
||||
}
|
||||
.hm-orgchart-expanded .hm-orgchart-engine.orgchart .node > .toggleBtn { display: none; }
|
||||
.hm-orgchart-expanded .hm-orgchart-organization-connectors {
|
||||
position: absolute; inset: 0; overflow: visible; pointer-events: none;
|
||||
}
|
||||
.hm-orgchart-expanded .hm-orgchart-organization-connectors path {
|
||||
fill: none; stroke: var(--hm-orgchart-expanded-line-color); stroke-width: var(--hm-orgchart-expanded-line-width);
|
||||
}
|
||||
|
||||
/* P9.3: outlines do not resize cards or replace company accents/connectors. */
|
||||
.hm-orgchart-expanded .hm-orgchart-viewport[data-drag-drop-enabled="true"] :is(.hm-orgchart-employee, .hm-orgchart-expanded-toggle) { cursor: grab; }
|
||||
.hm-orgchart-expanded .hm-orgchart-viewport[data-drag-drop-enabled="false"] :is(.hm-orgchart-employee, .hm-orgchart-expanded-toggle) { cursor: pointer; }
|
||||
.hm-orgchart-expanded .hm-orgchart-move-feedback { margin: 0; overflow-wrap: anywhere; color: var(--hm-orgchart-resolved-fg-secondary); }
|
||||
.hm-orgchart-expanded .hm-orgchart-move-feedback[data-move-status="success"] { color: var(--hm-orgchart-resolved-action-primary); font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
|
||||
.hm-orgchart-expanded .hm-orgchart-move-feedback[data-move-status="failure"] { color: var(--hm-orgchart-resolved-fg-primary); text-decoration: underline; }
|
||||
.hm-orgchart-expanded .hm-orgchart-viewport[data-edit-dragging] { cursor: grabbing; user-select: none; }
|
||||
.hm-orgchart-expanded [data-edit-source="true"] { opacity: 0.55; }
|
||||
.hm-orgchart-expanded .node[data-drop-state="allowed"] > .hm-orgchart-organization { outline: 2px dashed var(--hm-orgchart-resolved-stroke-input-focus); outline-offset: 2px; }
|
||||
.hm-orgchart-expanded .node[data-drop-state="blocked"] > .hm-orgchart-organization { outline: 1px dotted var(--hm-orgchart-resolved-stroke-default); outline-offset: 2px; }
|
||||
.hm-orgchart-expanded .node[data-drop-hover="allowed"] > .hm-orgchart-organization { outline: 3px solid var(--hm-orgchart-resolved-action-primary); }
|
||||
.hm-orgchart-expanded .node[data-drop-hover="blocked"] > .hm-orgchart-organization { outline: 3px double var(--hm-orgchart-resolved-fg-secondary); }
|
||||
@@ -1,7 +1,7 @@
|
||||
/* P3 read-only summary presenters. Values are from Workdesk index.css:
|
||||
headcount-panel / bold-text / sidebar- / #summary-table and the bottom
|
||||
.section legend. These are standalone OrgChart content, not HM overrides. */
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-organization-totals {
|
||||
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-organization-totals {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
@@ -13,7 +13,7 @@
|
||||
color: #18253a;
|
||||
font-size: 14px;
|
||||
}
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-organization-totals-title {
|
||||
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-organization-totals-title {
|
||||
width: 176px;
|
||||
margin: 0;
|
||||
padding: 4px 0;
|
||||
@@ -67,7 +67,7 @@
|
||||
.hm-orgchart-workdesk-position-table tfoot :is(th, td) { height: 20px; }
|
||||
.hm-orgchart-workdesk-count-cell { font-variant-numeric: tabular-nums; }
|
||||
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar {
|
||||
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -81,11 +81,11 @@
|
||||
box-shadow: 0 5.4px 14.3px rgba(44, 68, 96, 0.08);
|
||||
color: #1c2534;
|
||||
}
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-list {
|
||||
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-list {
|
||||
flex-wrap: nowrap;
|
||||
gap: 26.8px;
|
||||
}
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-item {
|
||||
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-item {
|
||||
position: relative;
|
||||
height: 42.9px;
|
||||
min-height: 42.9px;
|
||||
@@ -95,8 +95,8 @@
|
||||
font-weight: 500;
|
||||
line-height: 19.7px;
|
||||
}
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-item + .hm-orgchart-affiliation-bar-item { border: 0; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-item + .hm-orgchart-affiliation-bar-item::before {
|
||||
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-item + .hm-orgchart-affiliation-bar-item { border: 0; }
|
||||
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-item + .hm-orgchart-affiliation-bar-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -106,14 +106,22 @@
|
||||
background: rgba(113, 142, 176, 0.48);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-item dt { gap: 0.9px; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar .hm-orgchart-affiliation-mark {
|
||||
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-item dt { gap: 0.9px; }
|
||||
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar .hm-orgchart-affiliation-mark {
|
||||
width: 39.3px;
|
||||
height: 39.3px;
|
||||
flex-basis: 39.3px;
|
||||
}
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar .hm-orgchart-affiliation-mark img { object-fit: cover; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-total {
|
||||
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar .hm-orgchart-affiliation-mark img { object-fit: cover; }
|
||||
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-total {
|
||||
color: #071d3a;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Overview shares the bar's internal design, but lets its items wrap in the
|
||||
page flow. No Fixed stage/absolute positioning is copied into the preview. */
|
||||
.hm-orgchart-shell.hm-orgchart-summary-preview .hm-orgchart-affiliation-bar { height: auto; padding-block: 6.25px; }
|
||||
.hm-orgchart-shell.hm-orgchart-summary-preview .hm-orgchart-affiliation-bar-list { flex-wrap: wrap; row-gap: 8px; }
|
||||
@media (max-width: 767px) {
|
||||
.hm-orgchart-shell.hm-orgchart-summary-preview .hm-orgchart-affiliation-bar-item + .hm-orgchart-affiliation-bar-item::before { display: none; }
|
||||
}
|
||||
@@ -157,8 +157,8 @@
|
||||
|
||||
/* Workdesk compact artwork. Preserve flow placement for unknown organizations;
|
||||
the measured preset alone enables this original 1920×914.5 coordinate layer. */
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] { grid-template-rows: 224.2px auto 1fr auto; height: 914.5px; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-axis { width: 198px; height: 224.2px; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] { grid-template-rows: 224.2px auto 1fr auto; height: var(--hm-orgchart-workdesk-stage-height, 914.5px); }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-axis { width: 198px; height: 224.2px; z-index: 12; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-top-leaders { position: absolute; top: 35.3px; z-index: 35; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-hub {
|
||||
position: absolute;
|
||||
@@ -192,7 +192,7 @@
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-footer { position: relative; z-index: 7; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-side { position: relative; z-index: 18; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-belowTree { position: relative; z-index: 32; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-belowTree { position: absolute; left: 32px; bottom: 70px; width: 240px; margin: 0; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-belowTree { position: absolute; left: 32px; bottom: 82px; width: 240px; margin: 0; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-status-summary { gap: 12px; flex-wrap: nowrap; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-slot-footer { position: absolute; left: 57px; right: 57px; bottom: 12px; margin: 0; }
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-person-role,
|
||||
@@ -207,6 +207,12 @@
|
||||
.hm-orgchart-workdesk-meeting { left: 68px; bottom: 32px; width: 557px; height: 344px; opacity: 0.8; mix-blend-mode: multiply; }
|
||||
.hm-orgchart-workdesk-grid { left: 62px; bottom: 18.9px; width: 1768px; height: 275px; }
|
||||
.hm-orgchart-workdesk-hub-frame { inset: 0; width: 100%; height: 100%; z-index: -1; object-position: top; }
|
||||
/* One base-coordinate central layer; top and bottom modules keep their own
|
||||
anchors. Decorations retain their original size and 914.5px coordinates. */
|
||||
.hm-orgchart-stage[data-workdesk-artwork] :is(.hm-orgchart-axis,.hm-orgchart-viewport,.hm-orgchart-workdesk-overlay,.hm-orgchart-workdesk-decoration:not(.hm-orgchart-workdesk-hub-frame)) { transform: translateY(var(--hm-orgchart-workdesk-center-offset, 0px)); }
|
||||
.hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-workdesk-sky { bottom: auto; height: 914.5px; }
|
||||
.hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-workdesk-meeting { top: 538.5px; bottom: auto; }
|
||||
.hm-orgchart-stage[data-workdesk-artwork] .hm-orgchart-workdesk-grid { top: 620.6px; bottom: auto; }
|
||||
/* P3: artwork owns representative/hub/top-level routes. Hide every engine
|
||||
hierarchy route in readOnly only, including upstream pseudo-element paths. */
|
||||
.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-engine.orgchart .hierarchy::before,
|
||||
|
||||
Reference in new issue
Block a user