155 lines
8.1 KiB
CSS
155 lines
8.1 KiB
CSS
/* Independent content summaries inside Core's Shadow DOM. Colors and radii use
|
|
the standalone OrgChart defaults in design-tokens.css.
|
|
Content gaps/dimensions are local geometry, not overrides of HM components. */
|
|
.hm-orgchart-position-summary,
|
|
.hm-orgchart-affiliation-summary,
|
|
.hm-orgchart-status-group {
|
|
min-width: 0;
|
|
padding: 16px;
|
|
border: 1px solid var(--hm-orgchart-resolved-stroke-default);
|
|
border-radius: var(--hm-orgchart-resolved-radius-container);
|
|
background: var(--hm-orgchart-resolved-bg-surface);
|
|
}
|
|
.hm-orgchart-position-summary { margin-top: 0; }
|
|
.hm-orgchart-position-summary .hm-orgchart-summary-title,
|
|
.hm-orgchart-affiliation-summary .hm-orgchart-summary-title,
|
|
.hm-orgchart-status-summary .hm-orgchart-summary-title {
|
|
margin: 0 0 8px;
|
|
font-size: 15px;
|
|
font-weight: var(--hm-orgchart-resolved-font-weight-bold);
|
|
line-height: 1.5;
|
|
}
|
|
.hm-orgchart-position-summary .hm-orgchart-raw-total,
|
|
.hm-orgchart-affiliation-summary .hm-orgchart-raw-total {
|
|
margin: 0 0 8px;
|
|
font-weight: var(--hm-orgchart-resolved-font-weight-medium);
|
|
}
|
|
.hm-orgchart-position-summary .hm-orgchart-policy,
|
|
.hm-orgchart-status-summary .hm-orgchart-policy {
|
|
margin: 4px 0;
|
|
color: var(--hm-orgchart-resolved-fg-secondary);
|
|
font-size: 11px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.hm-orgchart-summary-scroll { max-width: 100%; overflow: auto; margin-top: 12px; }
|
|
.hm-orgchart-summary-scroll:focus-visible {
|
|
outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus);
|
|
outline-offset: 2px;
|
|
}
|
|
.hm-orgchart-summary .hm-orgchart-position-table {
|
|
width: max-content;
|
|
min-width: 100%;
|
|
margin-top: 0;
|
|
table-layout: auto;
|
|
border-collapse: collapse;
|
|
color: var(--hm-orgchart-resolved-table-text);
|
|
background: var(--hm-orgchart-resolved-table-background);
|
|
font-size: var(--hm-orgchart-resolved-table-font-size);
|
|
line-height: var(--hm-orgchart-resolved-table-line-height);
|
|
}
|
|
.hm-orgchart-summary .hm-orgchart-position-table caption {
|
|
max-width: 480px;
|
|
padding: 0 0 var(--hm-orgchart-resolved-table-caption-gap);
|
|
text-align: left;
|
|
color: var(--hm-orgchart-resolved-table-caption-color);
|
|
font-size: var(--hm-orgchart-resolved-table-caption-font-size);
|
|
line-height: var(--hm-orgchart-resolved-table-caption-line-height);
|
|
}
|
|
.hm-orgchart-summary .hm-orgchart-position-table th,
|
|
.hm-orgchart-summary .hm-orgchart-position-table td {
|
|
min-width: 64px;
|
|
max-width: 160px;
|
|
padding: var(--hm-orgchart-resolved-table-cell-padding-y) var(--hm-orgchart-resolved-table-cell-padding-x);
|
|
border-bottom: var(--hm-orgchart-resolved-table-divider-width) solid var(--hm-orgchart-resolved-table-divider-color);
|
|
font-variant-numeric: tabular-nums;
|
|
overflow-wrap: anywhere;
|
|
vertical-align: middle;
|
|
}
|
|
.hm-orgchart-summary .hm-orgchart-position-table th:first-child { min-width: 100px; }
|
|
.hm-orgchart-summary .hm-orgchart-position-table thead th {
|
|
background: var(--hm-orgchart-resolved-table-header-background);
|
|
color: var(--hm-orgchart-resolved-table-header-text);
|
|
border-top: var(--hm-orgchart-resolved-table-divider-width) solid var(--hm-orgchart-resolved-table-header-border-top);
|
|
border-bottom-color: var(--hm-orgchart-resolved-table-header-border-bottom);
|
|
font-size: var(--hm-orgchart-resolved-table-header-font-size);
|
|
font-weight: var(--hm-orgchart-resolved-table-header-font-weight);
|
|
}
|
|
.hm-orgchart-summary .hm-orgchart-position-table tbody th { font-weight: var(--hm-orgchart-resolved-font-weight-medium); }
|
|
.hm-orgchart-summary .hm-orgchart-position-table .hm-orgchart-count-cell { text-align: right; }
|
|
.hm-orgchart-summary .hm-orgchart-position-table .hm-orgchart-subtotal { font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
|
|
.hm-orgchart-summary .hm-orgchart-position-table .hm-orgchart-inclusive { color: var(--hm-orgchart-resolved-fg-secondary); text-align: right; }
|
|
.hm-orgchart-summary .hm-orgchart-position-table tfoot {
|
|
background: var(--hm-orgchart-resolved-table-footer-background);
|
|
font-weight: var(--hm-orgchart-resolved-table-footer-font-weight);
|
|
}
|
|
.hm-orgchart-summary .hm-orgchart-position-table tbody tr:hover { background: var(--hm-orgchart-resolved-table-row-hover-background); }
|
|
.hm-orgchart-status-totals { font-size: 12px; }
|
|
.hm-orgchart-affiliation-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
|
|
gap: 8px;
|
|
margin: 12px 0 0;
|
|
}
|
|
.hm-orgchart-affiliation-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
padding: 12px;
|
|
border: 1px solid var(--hm-orgchart-resolved-stroke-input-default);
|
|
border-radius: var(--hm-orgchart-resolved-radius-container);
|
|
background: var(--hm-orgchart-resolved-bg-content);
|
|
}
|
|
.hm-orgchart-affiliation-name { min-width: 0; overflow-wrap: anywhere; font-weight: var(--hm-orgchart-resolved-font-weight-medium); }
|
|
.hm-orgchart-affiliation-name { display: flex; align-items: center; gap: 8px; }
|
|
.hm-orgchart-affiliation-name .hm-orgchart-affiliation-mark {
|
|
display: inline-flex;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
flex: 0 0 28px;
|
|
font-size: 10px;
|
|
}
|
|
.hm-orgchart-affiliation-count { flex: 0 0 auto; margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
|
|
.hm-orgchart-status-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
|
|
gap: 16px;
|
|
min-width: 0;
|
|
}
|
|
.hm-orgchart-status-summary:empty { display: none; }
|
|
.hm-orgchart-status-employees { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
|
|
.hm-orgchart-status-employees .hm-orgchart-employee { margin-top: 0; }
|
|
.hm-orgchart-status-group > .hm-orgchart-summary-title {
|
|
background: var(--hm-orgchart-resolved-status-title-background);
|
|
color: var(--hm-orgchart-status-title-color, var(--hm-orgchart-resolved-fg-primary));
|
|
border: 1px solid var(--hm-orgchart-status-title-border, rgba(92, 101, 112, 0.52));
|
|
box-shadow: 0 7px 16px rgba(75, 84, 96, 0.18);
|
|
}
|
|
.hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] {
|
|
margin: 0;
|
|
background-image: var(--hm-orgchart-resolved-status-card-gradient);
|
|
border: 1px solid var(--hm-orgchart-resolved-status-card-border);
|
|
border-radius: var(--br-3_5, var(--hm-orgchart-resolved-radius-container));
|
|
cursor: pointer;
|
|
}
|
|
.hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] .hm-orgchart-person-role { color: var(--hm-orgchart-status-position-color, #555f6a); }
|
|
.hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] .hm-orgchart-person-name { color: var(--hm-orgchart-resolved-status-card-color); }
|
|
.hm-orgchart-status-group[data-work-status="dispatched"] {
|
|
--hm-orgchart-resolved-status-title-background: var(--hm-orgchart-dispatched-title-background, var(--hm-orgchart-status-title-background, linear-gradient(180deg, #87909c 0%, #68727e 100%)));
|
|
--hm-orgchart-resolved-status-card-gradient: var(--hm-orgchart-dispatched-card-gradient, var(--hm-orgchart-status-card-gradient, linear-gradient(180deg, #f4f5f6 0%, #dfe3e7 100%)));
|
|
--hm-orgchart-resolved-status-card-border: var(--hm-orgchart-dispatched-card-border, var(--hm-orgchart-status-card-border, rgba(120, 130, 142, 0.35)));
|
|
--hm-orgchart-resolved-status-card-color: var(--hm-orgchart-dispatched-card-color, var(--hm-orgchart-status-card-color, #3e4650));
|
|
}
|
|
.hm-orgchart-status-group[data-work-status="onLeave"] {
|
|
--hm-orgchart-resolved-status-title-background: var(--hm-orgchart-on-leave-title-background, var(--hm-orgchart-status-title-background, linear-gradient(180deg, #87909c 0%, #68727e 100%)));
|
|
--hm-orgchart-resolved-status-card-gradient: var(--hm-orgchart-on-leave-card-gradient, var(--hm-orgchart-status-card-gradient, linear-gradient(180deg, #f4f5f6 0%, #dfe3e7 100%)));
|
|
--hm-orgchart-resolved-status-card-border: var(--hm-orgchart-on-leave-card-border, var(--hm-orgchart-status-card-border, rgba(120, 130, 142, 0.35)));
|
|
--hm-orgchart-resolved-status-card-color: var(--hm-orgchart-on-leave-card-color, var(--hm-orgchart-status-card-color, #3e4650));
|
|
}
|
|
.hm-orgchart-status-group .hm-orgchart-affiliation-mark img { filter: grayscale(1); opacity: 0.72; }
|
|
.hm-orgchart-content-empty { margin: 8px 0; color: var(--hm-orgchart-resolved-fg-secondary); font-size: 12px; }
|