You are here

Home » API reference » Organigrams 8.2

orgchart-theme.css in Organigrams 8.2 

/* Item styling. */
.orgchart .nodecontent {
  width: 150px;
  min-height: 50px;
  background-color: #ffffff;
  padding: 10px;
  margin: 20px;
  border-radius: 0;
  border: 1px solid #000000;
  color: #000000;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

/* Image styling. */
.orgchart .nodecontent img {
  width: 50px;
  margin: auto;
  margin-bottom: 10px;
}

/* Link styling. */
.orgchart a.nodecontent {
  background-color: #eeeeee;
}

.orgchart a.nodecontent:hover {
  background-color: #dddddd;
}

/* Line color. */
.orgchart li::before,
.orgchart li::after,
.orgchart .nodecontent::after,
.orgchart .nodecontent::before,
.orgchart ul.vertical::before {
  border-color: #000000;
}

/* Line radius. */
.orgchart li:first-child::before,
.orgchart .nodeassists > li:nth-child(odd)::before,
.orgchart ul.vertical > li:first-child::before {
  border-top-left-radius: 0;
}

.orgchart li:last-child::before,
.orgchart .nodeassists > li:nth-child(even)::before {
  border-top-right-radius: 0;
}

.orgchart ul.vertical > li:last-child::before {
  border-bottom-left-radius: 0;
}

.orgchart ul.vertical::before {
  border-bottom-right-radius: 0;
}

/* Line width. */
.orgchart li:not(:only-child)::before,
.orgchart ul.vertical > li:first-child::before,
.orgchart ul.vertical > li > .nodecontent::before {
  border-top-width: 1px;
}

.orgchart li:last-child::before,
.orgchart .nodeassists > li:nth-child(even)::before,
.orgchart .nodeassists > li:nth-child(odd)::after,
.orgchart ul.vertical::before {
  border-right-width: 1px;
}

.orgchart .nodeassists > li:nth-child(odd)::after {
  right: 0;
}

.orgchart ul.vertical > li:last-child::before,
.orgchart ul.vertical::before {
  border-bottom-width: 1px;
}

.orgchart li:first-child::before,
.orgchart .nodecontent::after,
.orgchart .nodecontent::before,
.orgchart .nodeassists > li:nth-child(odd)::before,
.orgchart ul.vertical > li::before,
.orgchart ul.vertical > li:first-child::before {
  border-left-width: 1px;
}

/* Corrections when adjusting border sizes. */
.orgchart ul.vertical::before {
  top: -9px;
  left: calc(50% - 10px);
}

.orgchart .nodecontent:after,
.orgchart .nodeassists > li > .nodecontent::after {
  bottom: -21px;
}

.orgchart .nodecontent::before {
  top: -21px;
}

.orgchart ul.vertical > li > .nodecontent::before {
  width: 9px;
  left: -10px;
}

File

css/orgchart-theme.css
View source 
  1. /* Item styling. */

  2. .orgchart .nodecontent {

  3.   width: 150px;

  4.   min-height: 50px;

  5.   background-color: #ffffff;

  6.   padding: 10px;

  7.   margin: 20px;

  8.   border-radius: 0;

  9.   border: 1px solid #000000;

  10.   color: #000000;

  11.   text-align: center;

  12.   font-family: Arial, Helvetica, sans-serif;

  13.   font-size: 14px;

  14.   line-height: 18px;

  15.   display: flex;

  16.   justify-content: center;

  17.   align-content: center;

  18.   flex-direction: column;

  19. }

  20. 

  21. /* Image styling. */

  22. .orgchart .nodecontent img {

  23.   width: 50px;

  24.   margin: auto;

  25.   margin-bottom: 10px;

  26. }

  27. 

  28. /* Link styling. */

  29. .orgchart a.nodecontent {

  30.   background-color: #eeeeee;

  31. }

  32. 

  33. .orgchart a.nodecontent:hover {

  34.   background-color: #dddddd;

  35. }

  36. 

  37. /* Line color. */

  38. .orgchart li::before,

  39. .orgchart li::after,

  40. .orgchart .nodecontent::after,

  41. .orgchart .nodecontent::before,

  42. .orgchart ul.vertical::before {

  43.   border-color: #000000;

  44. }

  45. 

  46. /* Line radius. */

  47. .orgchart li:first-child::before,

  48. .orgchart .nodeassists > li:nth-child(odd)::before,

  49. .orgchart ul.vertical > li:first-child::before {

  50.   border-top-left-radius: 0;

  51. }

  52. 

  53. .orgchart li:last-child::before,

  54. .orgchart .nodeassists > li:nth-child(even)::before {

  55.   border-top-right-radius: 0;

  56. }

  57. 

  58. .orgchart ul.vertical > li:last-child::before {

  59.   border-bottom-left-radius: 0;

  60. }

  61. 

  62. .orgchart ul.vertical::before {

  63.   border-bottom-right-radius: 0;

  64. }

  65. 

  66. /* Line width. */

  67. .orgchart li:not(:only-child)::before,

  68. .orgchart ul.vertical > li:first-child::before,

  69. .orgchart ul.vertical > li > .nodecontent::before {

  70.   border-top-width: 1px;

  71. }

  72. 

  73. .orgchart li:last-child::before,

  74. .orgchart .nodeassists > li:nth-child(even)::before,

  75. .orgchart .nodeassists > li:nth-child(odd)::after,

  76. .orgchart ul.vertical::before {

  77.   border-right-width: 1px;

  78. }

  79. 

  80. .orgchart .nodeassists > li:nth-child(odd)::after {

  81.   right: 0;

  82. }

  83. 

  84. .orgchart ul.vertical > li:last-child::before,

  85. .orgchart ul.vertical::before {

  86.   border-bottom-width: 1px;

  87. }

  88. 

  89. .orgchart li:first-child::before,

  90. .orgchart .nodecontent::after,

  91. .orgchart .nodecontent::before,

  92. .orgchart .nodeassists > li:nth-child(odd)::before,

  93. .orgchart ul.vertical > li::before,

  94. .orgchart ul.vertical > li:first-child::before {

  95.   border-left-width: 1px;

  96. }

  97. 

  98. /* Corrections when adjusting border sizes. */

  99. .orgchart ul.vertical::before {

  100.   top: -9px;

  101.   left: calc(50% - 10px);

  102. }

  103. 

  104. .orgchart .nodecontent:after,

  105. .orgchart .nodeassists > li > .nodecontent::after {

  106.   bottom: -21px;

  107. }

  108. 

  109. .orgchart .nodecontent::before {

  110.   top: -21px;

  111. }

  112. 

  113. .orgchart ul.vertical > li > .nodecontent::before {

  114.   width: 9px;

  115.   left: -10px;

  116. }