bpmn-js-element-templates/dist/assets/element-templates.css

Element templates for bpmn-js

.bio-properties-panel {
  --color-grey-225-10-50: hsl(225, 10%, 50%);

  --select-template-background-color: var(--color-blue-205-100-50);
  --select-template-hover-background-color: var(--color-blue-205-100-45);
  --select-template-fill-color: var(--color-white);
  --select-template-label-color: var(--color-white);

  --unknown-template-background-color: var(--color-red-360-100-45);
  --unknown-template-hover-background-color: var(--color-red-360-100-40);

  --incompatible-template-background-color: rgb(255, 131, 43);
  --incompatible-template-hover-background-color: hsl(25, 100%, 50%);
  --incompatible-template-fill-color: var(--color-grey-225-10-15);
  --incompatible-template-label-color: var(--color-grey-225-10-15);

  --select-template-information-text-color: var(--color-grey-225-10-55);

  --deprecated-template-hover-background-color: var(--color-grey-225-10-50);
  --deprecated-template-background-color: var(--color-grey-225-10-55);
}

.bio-properties-panel-header-template-icon {
  object-fit: contain;
}

.bio-properties-panel-templates-group .bio-properties-panel-group-header {
  position: initial;
}

.bio-properties-panel-templates-group .bio-properties-panel-group-header-button:not(.bio-properties-panel-arrow) {
  padding-right: 6px;
  padding-left: 9px;
  border-radius: 11px;
}

.bio-properties-panel-applied-template-button .bio-properties-panel-group-header-button,
.bio-properties-panel-template-update-available .bio-properties-panel-group-header-button,
.bio-properties-panel-group-header-button.bio-properties-panel-select-template-button {
  background-color: var(--select-template-background-color);
  color: var(--select-template-label-color);
  fill: var(--select-template-fill-color);
}

.bio-properties-panel-applied-template-button .bio-properties-panel-group-header-button:hover,
.bio-properties-panel-template-update-available .bio-properties-panel-group-header-button:hover,
.bio-properties-panel-group-header-button.bio-properties-panel-select-template-button:hover {
  background-color: var(--select-template-hover-background-color);
}

.bio-properties-panel-templates-group .bio-properties-panel-group-header-button * {
  color: inherit;
}

.bio-properties-panel-templates-group .bio-properties-panel-group-header-button * + * {
  margin-left: 2px;
}

.bio-properties-panel-group-header-button.bio-properties-panel-select-template-button:last-child {
  padding-right: 9px;
  padding-left: 6px;
  margin-right: 22px;
}

.bio-properties-panel-template-update-available:last-child,
.bio-properties-panel-applied-template-button:last-child,
.bio-properties-panel-template-not-found:last-child,
.bio-properties-panel-template-incompatible:last-child {
  margin-right: 32px;
}

.bio-properties-panel-remove-template {
  color: var(--text-error-color);
}

.bio-properties-panel-deprecated-template-button .bio-properties-panel-group-header-button {
  background-color: var(--deprecated-template-background-color);
  color: var(--select-template-label-color);
  fill: var(--select-template-fill-color);
}

.bio-properties-panel-deprecated-template-button:hover .bio-properties-panel-group-header-button:hover {
  background-color: var(--deprecated-template-hover-background-color);
}

.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button {
  background-color: var(--unknown-template-background-color);
  color: var(--select-template-label-color);
  fill: var(--select-template-fill-color);
}

.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button:hover {
  background-color: var(--unknown-template-hover-background-color);
}

.bio-properties-panel-template-incompatible .bio-properties-panel-group-header-button {
  background-color: var(--incompatible-template-background-color);
  color: var(--incompatible-template-label-color);
  fill: var(--incompatible-template-fill-color);
}

.bio-properties-panel-template-incompatible .bio-properties-panel-group-header-button:hover {
  background-color: var(--incompatible-template-hover-background-color);
}

.bio-properties-panel-template-not-found-text,
.bio-properties-panel-template-update-available-text,
.bio-properties-panel-template-incompatible-text {
  color: var(--select-template-information-text-color);
}

.bio-properties-panel-template-not-found-text,
.bio-properties-panel-template-update-available-text,
.bio-properties-panel-deprecated-template-text,
.bio-properties-panel-template-incompatible-text {
  width: 216px;
}