harbor/src/portal/src/css/common.scss

// styles for dark and light theme should be defined here.
.in-overflow {
    .tabs-overflow {
      > .nav-item {
        > button {
          box-shadow: 0 -3px 0 $mode-link-color2 inset;
          color: #0077b8;
        }
      }
    }
}

.label-form {
  background-color: $label-form-color !important;
}

.esxc-gauge-circle-bgc-dark {
  background-color: $mode-background-color1 ;
}

.harbor-icon {
  transform: translateX($harbor-icon-translate-x) !important;
  filter: drop-shadow($fill-color1 $harbor-icon-drop-shadow-x 2px) !important;
}

.color-white-dark {
  color: $right-status-fill-color;
}

.label-filter-panel {
  background-color: $mode-background-color !important;
}

.filter-dark {
  color: $mode-font-color1 !important;
}

.side-form {
  background-color: $mode-background-color !important;
}
/* stylelint-disable */
.toolBar {
  background-color: $mode-background-color !important;
}

.search-overlay {
  background-color: $mode-background-color2 !important;
}

.add-modal-dark {
  background: $mode-background-color3 !important;
}

.license {
  background-color: $mode-background-color !important;
}

.pagination-list {
  .pagination-current {
    color: $mode-font-color1 !important;
  }
}

.no-info-div,
.info-div {
  background-color: $mode-background-color !important;
}

.bottom-line-project-config {
  color: $mode-font-color3 !important;
}

.config-subtext {
  color: $mode-font-color4 !important;
}

.permission-dark {
  color: $mode-font-color3 !important;
}

.scanner-name {
  color: $mode-font-color3 !important;
}

.summary-dark {
  color: $mode-font-color3 !important;

  h5 {
    color: $mode-font-color3 !important;
  }
}

.about-version {
  color: $mode-font-color2 !important;
}

.update-time {
  color: $mode-font-color3 !important;
}

.font-style {
  color: $mode-font-color3 !important;
}

.go-link {
  color: $mode-link-color1 !important; 
  border-bottom: 1px solid  $mode-link-color1 !important;
}

.circle-block {
  color: $mode-font-color5 !important;
}

.executions-detail {
  label {
    color: $mode-font-color3 !important;
  }
}

.black-point {
  background-color: $mode-font-color3 !important;
}

clr-dg-action-overflow {
  clr-icon {
    fill: $mode-font-color3 !important;
  }
}

.oidc-tip {
  color: $mode-font-color3 !important;
}

.clr-select-wrapper{
  select {
    option {
      background: $select-back-color;
      color: $select-option-color;
    }
  } 
}

hbr-tag {
  .color-green {
    color: $light-color-green !important;
  }
}

.filter-divider {
  background-color: $filter-divider-bg-color ;
}

.selectBox {
  background: $select-back-color !important;
  color: $select-option-color !important;
}

.selectBox ul li:hover{
  background-image: linear-gradient(180deg,$selectBox-option-hover-bg-color-start 0,$selectBox-option-hover-bg-color-end) !important;
}

hbr-result-tip-histogram {
  .inner {
    background-color: $hbr-result-tip-histogram-inner-bg-color;
  }
}

// style of hbr-artifact-summary component
@mixin align-text-mixin($values...) {
  @each $var in $values {
    &[align="$var"] {
      text-align: $var;
    }
  }
}
%code-block {
  background: $color-ddd;
  border-radius: 2px;
  padding: 2px 4px;
}

:not(pre) > code[class*="language-"], pre[class*="language-"] {
  background-color: $color-yaml;
}

.md-div {
  code:not([class*="language-"]) {
    @extend %code-block;

    color: $color-657b83
  }

  pre:not([class*="language-"]) {
    background: $color-fdf6e3;

    code:not([class*="language-"]) {
      @extend %code-block;

      background: transparent;
    }
  }

  table {
    display: block;
    width: 100%;
    overflow: auto;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
    margin-bottom: 16px;

    td,
    th {
      padding: 6px 13px;
      border: 1px solid $color-ddd;
      @include align-text-mixin(left, right, center);
    }

    tr {
      &:nth-child(2n) {
        background-color: $color-f2;
      }
    }
  }
}

.table-tag {
  .tag-thead {
    .tag-header-color {
      color: $mode-background-color3;
    }
  };

  .tag-tbody {
    .tag-tr {
      .tag-body-color {
        color: $mode-background-color2;
      }
    }
  }

}

clr-header {
  background-color: $header-color;
}

.clr-page-size-select {
  z-index: 0!important;
}

hbr-copy-input {
  .command-input {
    color: $command-input-color;
    background-color: $command-input-bg-color;
  }
}

artifact-list-tab {
  .labelBtn {
     .pull-left {
       color: $mode-font-color1
     }
  }

  .labelBtn:hover {
    background-color: $label-hover-bg-color;
  }

  .list-filter {
    li:hover {
      background-color: $label-hover-bg-color;
    }
  }
}

.nav-divider {
  background-color: $nav-divider-bg-color;
}

.label-color-input {
  color: $label-color-input !important;
}

// for repos page grid view
.central-block-loading {
  background-color: $central-block-loading-bg-color;
}

.backStyle {
  color: $back-link-color;
}

.back-icon {
  color: $back-link-color;
}

.breadcrumb a {
  color: $back-link-color;
}

.arrow-block a{
  color: $back-link-color;
}

.onback {
  color: $back-link-color;
}

app-tag-feature-integration {
  .checked {
    background-color: $radio-button-checked;
  }
}

input:-webkit-autofill {
  box-shadow: 0 0 0 30px $input-autofill-bg-color inset;
  -webkit-text-fill-color: $input-autofill-color !important;
  caret-color: $input-autofill-color
}

hbr-copy-input {
  .info-tips-icon {
    color: $pull-command-icon-color;
  }

  .info-tips-icon:hover {
    color: $pull-command-icon-hover-color;
  }
}

.select-all-for-dropdown {
  color: $select-all-for-dropdown-color !important;
}