kibana-123/src/ui/public/styles/custom.less

Kibana is an open source (Apache Licensed), browser based analytics and search dashboard for Elasticsearch. Kibana is a snap to setup and start using. Kibana strives to be easy to get started with, while also being flexible and powerful, just like Elastic

@import (reference) "~ui/styles/variables";

@site-primary-color : #1e83ec;
@site-secondary-color : #3E4095;
@white-color : #ffffff;

/* Custom CSS */
a,
.kuiLocalDropdownHeader__action{
  color: @site-primary-color;
}

/* Button CSS */
.form-control,
.kuiButton,
.kuiToolBarSearchBox__input,
.kuiLocalSearchInput,
.kuiLocalSearchButton,
.btn-default,
.btn-danger,
.btn-warning,
.btn-info{
  border-radius : 0;
}

.kuiButton--basic,
.kuiTab{
  color: #a3a3a3;
  background-color: #f5f5f5;
}
.kuiButton--basic:active:enabled,
.kuiButton--basic:hover:enabled {
  color: @white-color !important;
  background-color: @site-primary-color;
}
.kuiTab.kuiTab-isSelected {
  color: @site-primary-color;
  background-color: #f5f5f5;
}
.kuiTab:focus {
  color: @site-primary-color;
  outline: 1px solid @site-primary-color !important;
}
.kuiTab:active {
  color: @site-primary-color !important;
  outline: 0;
  border-color: transparent;
}

/* Bootstrap Button Override */
.btn-primary {
  border-radius: 0;
  color: @white-color;
  border-color: @site-primary-color;
  background-color: @site-primary-color;
  &:active,
  &.active,
  &:focus,
  &.focus,
  &:hover{
    color: @white-color;
    background-color: #1260b1;
  }
}
.open>.dropdown-toggle.btn-primary {
  color: @white-color;
  background-color: #1260b1;
}

.btn-success {
  border-radius: 0;
  color: @white-color;
  background-color: @site-secondary-color;
  border-color: @site-secondary-color;
  &.active,
  &:active,
  &:hover{
    color: @white-color;
    background-color: #595bc7;
    border-color: #595bc7;
  }
}
.open>.dropdown-toggle.btn-success {
  color: @white-color;
  background-color: #595bc7;
  border-color: #595bc7;
}

/* Side Nav CSS */
.global-nav{
  background-color: #1f1f1f;
  .logo-small,
  .logo{
    &.kibana{
      background-image: url("~ui/images/logo.png");
      background-position: center center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-color: @white-color;
    }
  }
}
.global-nav-link{
  &:hover,
  &:active{
    background-color: @site-primary-color;
  }
}
.global-nav__links::-webkit-scrollbar-thumb{
  background-color: @site-primary-color;
}

/* Right Top Nav CSS */
.kuiLocalNav{
  background-color: #1f1f1f;
  color: @site-primary-color;
}
.kuiLocalTab{
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: @white-color;
  &.kuiLocalTab-isSelected{
    color: @site-primary-color;
    border-bottom-color: @site-primary-color;
  }
}
.kuiLocalMenuItem{
  color: @white-color;
  &.kuiLocalMenuItem-isSelected{
    background-color: @site-primary-color;
    &:hover{
      color: @white-color;
    }
  }
  &.kuiLocalMenuItem-isDisabled:hover,
  &:hover{
    color: @site-primary-color;
  }
}
.kuiLocalBreadcrumb+.kuiLocalBreadcrumb:before,
.kuiTab:hover:not(.kuiTab-isSelected){
  color: @site-primary-color;
}

.kuiLocalBreadcrumbs{
  .kuiLocalBreadcrumb{
    color: @site-primary-color;
  }
}

/* Input CSS */
.kuiToolBarSearchBox__input:focus{
  border-color: @site-primary-color;
}


/* Wizard CSS */
.wizard {
  .wizard-type:hover,
  .wizard-type-heading-text,
  .wizard-type-heading-icon {
    color: @site-primary-color;
  }
}

/* Management CSS */
.panel-product {
  .panel-heading-kibana {
    background-image: url("~ui/icons/john.png");
  }
  .panel-body{
    ul.management-section-items {
      .management-link {
        &:hover{
          color: @site-primary-color;
        }
      }
    }
  }
}