128 lines
5.1 KiB
CSS
128 lines
5.1 KiB
CSS
/* 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. */
|
|
: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;
|
|
width: calc(var(--hm-orgchart-workdesk-summary-width) + 2px);
|
|
overflow: visible;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: none;
|
|
color: #18253a;
|
|
font-size: 14px;
|
|
}
|
|
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-organization-totals-title {
|
|
width: 176px;
|
|
margin: 0;
|
|
padding: 4px 0;
|
|
border-radius: 7px 0 0 0;
|
|
background: linear-gradient(180deg, #004890, #00366f);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
line-height: 15.2px;
|
|
text-align: center;
|
|
}
|
|
.hm-orgchart-workdesk-summary-frame {
|
|
width: 100%;
|
|
box-shadow: 0 6.5px 12.9px rgba(51, 73, 96, 0.11);
|
|
border: 0.8px solid #c4d3e2;
|
|
border-radius: 6.33px 0 6.33px 6.33px;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
}
|
|
.hm-orgchart-workdesk-position-table {
|
|
width: var(--hm-orgchart-workdesk-summary-width);
|
|
table-layout: fixed;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
color: #18253a;
|
|
font-size: 14px;
|
|
line-height: 1.15;
|
|
text-align: center;
|
|
}
|
|
/* Preserve the 330px fixture table while giving its complete organization
|
|
labels and three-character first position enough room at the source's 14px.
|
|
Remaining numeric columns share the available width without changing data. */
|
|
.hm-orgchart-workdesk-label-column { width: 112px; }
|
|
.hm-orgchart-workdesk-value-column { width: auto; }
|
|
.hm-orgchart-workdesk-value-column:nth-child(2) { width: 46px; }
|
|
.hm-orgchart-workdesk-position-table th,
|
|
.hm-orgchart-workdesk-position-table td {
|
|
height: 19px;
|
|
padding: 0;
|
|
border-top: 0.5px solid #d7e1ea;
|
|
font-weight: 400;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
overflow-wrap: normal;
|
|
}
|
|
.hm-orgchart-workdesk-position-table th:first-child { padding: 0 7px; }
|
|
.hm-orgchart-workdesk-position-table :is(th, td) + :is(th, td) { border-left: 0.8px solid #d7e1ea; }
|
|
.hm-orgchart-workdesk-position-table thead { color: #223149; }
|
|
.hm-orgchart-workdesk-position-table thead th,
|
|
.hm-orgchart-workdesk-position-table tfoot :is(th, td) { background: #f2f6fa; }
|
|
.hm-orgchart-workdesk-position-table tfoot :is(th, td) { height: 20px; }
|
|
.hm-orgchart-workdesk-count-cell { font-variant-numeric: tabular-nums; }
|
|
|
|
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 55.4px;
|
|
min-height: 55.4px;
|
|
padding: 0 19px;
|
|
border: 0;
|
|
border-radius: 10.7px;
|
|
background: rgba(255, 255, 255, 0.82);
|
|
box-shadow: 0 5.4px 14.3px rgba(44, 68, 96, 0.08);
|
|
color: #1c2534;
|
|
}
|
|
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-list {
|
|
flex-wrap: nowrap;
|
|
gap: 26.8px;
|
|
}
|
|
: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;
|
|
padding: 0;
|
|
gap: 4px;
|
|
font-size: 19.6px;
|
|
font-weight: 500;
|
|
line-height: 19.7px;
|
|
}
|
|
: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%;
|
|
left: -13.9px;
|
|
width: 0.9px;
|
|
height: 21.4px;
|
|
background: rgba(113, 142, 176, 0.48);
|
|
transform: translateY(-50%);
|
|
}
|
|
: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;
|
|
}
|
|
: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; }
|
|
}
|