72 lines
2.3 KiB
CSS
72 lines
2.3 KiB
CSS
|
.p-organizationchart-table {
|
||
|
|
@apply border-spacing-0 border-separate my-0 mx-auto
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-table > tbody > tr > td {
|
||
|
|
@apply text-center align-top py-0 px-3
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-node {
|
||
|
|
@apply inline-block relative py-3 px-4 rounded-md
|
||
|
|
border border-surface-200 dark:border-surface-700
|
||
|
|
bg-surface-0 dark:bg-surface-900
|
||
|
|
text-surface-700 dark:text-surface-0
|
||
|
|
transition-colors duration-200
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) {
|
||
|
|
@apply pt-3 px-4 pb-5
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-node.p-organizationchart-node-selectable:not(.p-organizationchart-node-selected):hover {
|
||
|
|
@apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-node-selected {
|
||
|
|
@apply bg-highlight
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-node-toggle-button {
|
||
|
|
@apply absolute -bottom-3 -ms-3 z-20 start-1/2 select-none cursor-pointer w-6 h-6 no-underline rounded-full
|
||
|
|
inline-flex items-center justify-center transition-colors duration-200
|
||
|
|
border border-surface-200 dark:border-surface-700
|
||
|
|
bg-surface-0 text-surface-500 hover:bg-surface-100 hover:text-surface-700
|
||
|
|
dark:bg-surface-900 dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0
|
||
|
|
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
|
||
|
|
}
|
||
|
|
.p-organizationchart-node-toggle-button-icon {
|
||
|
|
@apply relative top-px
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-connector-down {
|
||
|
|
@apply my-0 mx-auto h-6 w-px bg-surface-200 dark:bg-surface-700
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-connector-right {
|
||
|
|
@apply rounded-none
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-connector-left {
|
||
|
|
@apply rounded-none border-e border-surface-200 dark:border-surface-700
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-connector-top {
|
||
|
|
@apply border-t border-surface-200 dark:border-surface-700
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-node-selectable {
|
||
|
|
@apply cursor-pointer
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) {
|
||
|
|
@apply border-e-0
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) {
|
||
|
|
@apply rounded-se-md
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) {
|
||
|
|
@apply border-s border-surface-200 dark:border-surface-700 rounded-ss-md
|
||
|
|
}
|