artemis-console-extension/artemis-extension/app/public/css/activemq.css

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* You can customise the styles of your application here. */


.pf-v5-c-login,
.pf-v5-c-about-modal-box__hero {
  background-image: url("../img/background.png") !important;
  background-size: cover;
}

.pf-v5-c-login__container {
  justify-content: left;
}
.pf-v5-c-login__main {
  background-color: transparent;
}

.pf-v5-c-login__main-body label {
  color: white;
}

.pf-v5-c-expandable-section__toggle {
  display: flex;
  padding: var(--pf-v5-c-expandable-section__toggle--PaddingTop) var(--pf-v5-c-expandable-section__toggle--PaddingRight) var(--pf-v5-c-expandable-section__toggle--PaddingBottom) var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
  margin-top: var(--pf-v5-c-expandable-section__toggle--MarginTop);
  color: var(--artemis-global--primary-color--100);
  border: none;
}

/*Uses ActiveMQ colors in broker diagram*/
svg text {
  font-family: PatternFlyIcons-webfont;
}

svg.pf-v5-svg {
  fill: #c12766;
}

.pf-topology__node.artemisBroker.pf-m-info .pf-topology__node__background {
  stroke:  var(--artemis-diag-broker-border);
  stroke-width: 3;
  fill: var(--artemis-diag-broker-color);
}

.pf-topology__node__label.artemisBrokerLabel {
  & > rect {
    stroke: var(--artemis-diag-broker-border);
  }

  .pf-topology__node__label__badge {
    & > rect {
      stroke: var(--artemis-diag-broker-border);
      fill:  var(--artemis-diag-broker-color);
    }
    & > text {
      fill: var(--artemis-diag-broker-label-text);
    }
  }
}

.pf-topology__node.artemisBackupBroker.pf-m-info .pf-topology__node__background {
  stroke:  var(--artemis-diag-backup-broker-border);
  stroke-width: 3;
  fill: var(--artemis-diag-backup-broker-color);
}

.pf-topology__node__label.artemisBackupBrokerLabel {
  & > rect {
    stroke: var(--artemis-diag-backup-broker-border);
  }

  .pf-topology__node__label__badge {
    & > rect {
      stroke: var(--artemis-diag-backup-broker-border);
      fill:  var(--artemis-diag-backup-broker-color);
    }
    & > text {
      fill: var(--artemis-diag-backup-broker-label-text);
    }
  }
}

.pf-topology__node.artemisAddress.pf-m-info .pf-topology__node__background {
  stroke:  var(--artemis-diag-address-border);
  stroke-width: 3;
  fill: var(--artemis-diag-address-color);
  & > rect {
    stroke: var(--artemis-diag-address-border);
    fill:  var(--artemis-diag-address-color);
  }
}

.pf-topology__node__label.artemisAddressLabel {
  & > rect {
    stroke: var(--artemis-diag-address-border);
  }

  .pf-topology__node__label__badge {
    & > rect {
      stroke: var(--artemis-diag-address-border);
      fill:  var(--artemis-diag-address-color);
    }
    & > text {
      fill: var(--artemis-diag-address-label-text);
    }
  }

}

.pf-topology__node.artemisQueue.pf-m-info .pf-topology__node__background {
  stroke:  var(--artemis-diag-queue-border);
  stroke-width: 3;
  fill: var(--artemis-diag-queue-color);
}

.pf-topology__node__label.artemisQueueLabel {
  & > rect {
    stroke: var(--artemis-diag-queue-border);
  }

   .pf-topology__node__label__badge {
    & > rect {
      stroke: var(--artemis-diag-queue-border);
      fill:  var(--artemis-diag-queue-color);
    }
    & > text {
      fill:var(--artemis-diag-queue-label-text);
    }
  }
}

.pf-topology__node.artemisInternalAddress.pf-m-info .pf-topology__node__background {
  stroke:  var(--artemis-diag-internal-address-border);
  stroke-width: 3;
  fill:  var(--artemis-diag-internal-address-color);
}

.pf-topology__node__label.artemisInternalAddressLabel {
  & > rect {
    stroke: var(--artemis-diag-internal-address-border);
  }

  .pf-topology__node__label__badge {
    & > rect {
      stroke: var(--artemis-diag-internal-address-border);
      fill:  var(--artemis-diag-internal-address-color);
    }
    & > text {
      fill: var(--artemis-diag-internal-address-label-text);
    }
  }
}

.pf-topology__node.artemisInternalQueue.pf-m-info .pf-topology__node__background {
  stroke:  var(--artemis-diag-internal-queue-border);
  stroke-width: 3;
  fill: var(--artemis-diag-internal-queue-color);
}

.pf-topology__node__label.artemisInternalQueueLabel {
  & > rect {
    stroke: var(--artemis-diag-internal-queue-border);
  }
  .pf-topology__node__label__badge {
    & > rect {
      stroke: var(--artemis-diag-internal-queue-border);
      fill:  var(--artemis-diag-internal-queue-color);
    }
    & > text {
      fill: var(--artemis-diag-internal-queue-label-text);
    }
  }
}

.pf-v5-c-button.pf-m-primary {
  background-color: var(--artemis-global--primary-color--200);
}

.pf-v5-c-button.pf-m-primary.pf-m-hover, .pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--artemis-global--primary-color--100);
  background-image: linear-gradient(to bottom,var(--artemis-global--primary-color--100) 0,#B24E78 100%);
  background: var(--artemis-global--primary-color-dark);
  border-color: var(--artemis-global--primary-color--100);
}

.pf-v5-c-title.pf-m-3xl {
  color: white;
}

.btn-primary {
  background-color: var(--artemis-global--primary-color--100);
  background-image: linear-gradient(to bottom,var(--artemis-global--primary-color--100) 0,var(--artemis-global--primary-color--100) 100%);
  background-repeat: repeat-x;
  border-color: var(--artemis-global--primary-color--100);
  color: #fff;
}
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover, .btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open .dropdown-toggle.btn-primary.focus,
.open .dropdown-toggle.btn-primary:focus,
.open .dropdown-toggle.btn-primary:hover {
  background-color: var(--artemis-global--primary-color--100);
  border-color: var(--artemis-global--primary-color-dark);
}

/*These change the row in a table when hovered over*/
.table-hover>tbody>tr:hover {
  background-color: var(--artemis-global--primary-color--300);
}

.table-hover>tbody>tr:hover td {
  background-color: var(--artemis-global--primary-color--200);
}

select>option:hover,
select>option:active {
  background: var(--artemis-global--primary-color--200);
  background-color: var(--artemis-global--primary-color--200);
}

tbody>tr:hover {
  background-color: var(--artemis-global--primary-color--300);
}

/*These button settings control the color of the buttons when clicked, hovered or visited*/
.btn-primary:hover,
.btn-primary.hover
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:visited,
.btn-primary.visited{
  background-color: var(--artemis-global--primary-color--100);
  background-image: linear-gradient(to bottom,var(--artemis-global--primary-color--100) 0,var(--artemis-global--primary-color--100) 100%);
  background: var(--artemis-global--primary-color-dark);
  border-color: var(--artemis-global--primary-color--100);
}

/*This changes the color of the hover item in the JMX Tree*/
.treeview-pf-hover .list-group-item:hover {
  background-color: var(--artemis-global--primary-color--100)!important;
  border-color: var(--artemis-global--primary-color--100)!important;
}

/*This changes the color of the chosen selection in the JMX Tree*/
.treeview-pf-select .list-group-item.node-selected {
  background: var(--artemis-global--primary-color--100)!important;
  border-color: var(--artemis-global--primary-color--100)!important;
  color: #fff!important;
}

/* This changes the color of the underline in the main left menu*/
.pf-v5-c-nav__list .pf-m-current.pf-v5-c-nav__link::after, .pf-v5-c-nav__list .pf-m-current>.pf-v5-c-nav__link::after {
  background-color: var(--artemis-global--primary-color--100);
}

.pf-v5-c-nav__list .pf-v5-c-nav__link.pf-m-hover::after, .pf-v5-c-nav__list .pf-v5-c-nav__link:hover::after {
  background-color: var(--artemis-global--primary-color--100);
}

.card-pf.card-pf-accented {
  border-top-color: var(--artemis-global--primary-color--100);
}

/*This changes the hover color in all the tables*/
.table-hover tbody tr:hover td.focus {
background-color: var(--artemis-global--primary-color--300);
}

:root {
  --artemis-global--primary-color--100: #B21054;
  --artemis-global--primary-color--200: #B24E78; 
  --artemis-global--primary-color--300: #c77e9c; 
  --artemis-global--primary-color--400: #c77e9c; 
  --artemis-global--primary-color-dark: #B21054;
  --artemis-global--primary-second-color-100: #2b326e;
  --artemis-diag-broker-color: #c12766;
  --artemis-diag-broker-border:#801944;
  --artemis-diag-broker-label-text:#fff;
  --artemis-diag-backup-broker-color: #c77e9c;
  --artemis-diag-backup-broker-border:#c12766;
  --artemis-diag-backup-broker-label-text:#fff;
  --artemis-diag-address-color: #3e489f;
  --artemis-diag-address-border:#2b326e;
  --artemis-diag-address-label-text:#fff;
  --artemis-diag-queue-color: #78932c;
  --artemis-diag-queue-border:#50621d;
  --artemis-diag-queue-label-text:#fff;
  --artemis-diag-internal-address-color: #fff;
  --artemis-diag-internal-address-border:#2b326e;
  --artemis-diag-internal-address-label-text:#000;
  --artemis-diag-internal-queue-color: #fff;
  --artemis-diag-internal-queue-border:#50621d;
  --artemis-diag-internal-queue-label-text:#000;
  --pf-v5-c-button--m-primary--BackgroundColor: var(--artemis-global--primary-color--200);
  --pf-v5-c-button--m-primary--BackgroundColor-hover: var(--artemis-global--primary-color--100);
  --pf-v5-global--active-color--100: var(--artemis-global--primary-color--200);
  --pf-v5-global--active-color--200:var(--artemis-global--primary-color--200);
  --pf-v5-global--active-color--300: var(--artemis-global--primary-color--300);
  --pf-v5-global--active-color--400: var(--artemis-global--primary-color--400);
  --pf-v5-global--primary-color--100: var(--artemis-global--primary-color--100);
  --pf-v5-global--primary-color--200: var(--artemis-global--primary-color--200);
  --pf-v5-global--primary-color--light-100: var(--artemis-global--primary-color--100);
  --pf-v5-global--primary-color--dark-100: var(--artemis-global--primary-color--100);
  --pf-v5-global--link--Color--hover: var(--artemis-global--primary-second-color-100);
  --pf-v5-global--link--Color: var(--artemis-global--primary-color--100);
  --pf-v5-global--link--Color--dark: var(--artemis-global--primary-color--100);
  --pf-v5-global--link--Color--light: var(--artemis-global--primary-color--300);;
  --pf-v5-global--link--Color--light--hover: var(--artemis-global--primary-color--400);
  /** icon inside broker diagram */
  --pf-v5-topology__node--Color: var(--artemis-global--primary-color--100)
}