feat(org-chart): add core cards and fixed-layout integration

2026-10-12 17:58:30 +09:00
1 parent d18e3c3380
commit 61c6f8d1f1
@@ -0,0 +1,119 @@
+/* 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 {
+  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;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .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; }
+
+.hm-orgchart-composition[data-display-mode="readOnly"] .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;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .hm-orgchart-affiliation-bar-list {
+  flex-wrap: nowrap;
+  gap: 26.8px;
+}
+.hm-orgchart-composition[data-display-mode="readOnly"] .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;
+}
+.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 {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -13.9px;
+  width: 0.9px;
+  height: 21.4px;
+  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 {
+  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 {
+  color: #071d3a;
+  font-weight: 700;
+}