ui/src/style/vars.less

// 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.

@import "common/function";

@logo-width: 256px;
@logo-height: 64px;
@banner-width: 450px;
@banner-height: 110px;
@error-width: 256px;
@error-height: 256px;

@logo-background-color: #ffffff;
@navigation-background-color: #ffffff;
@project-nav-background-color: #001529;
@project-nav-text-color: rgba(255, 255, 255, 0.65);
@navigation-text-color:  rgba(0, 0, 0, 0.65);
@primary-color: #1890ff;
@primary-color-light: tint(@primary-color, 90);
@link-color: @primary-color;
@link-hover-color: #40a9ff;
@processing-color: @primary-color;
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #f5222d;
@font-size-base: 14px;
@heading-color: rgba(0, 0, 0, 0.85);
@text-color: rgba(0, 0, 0, 0.65);
@text-color-secondary: rgba(0, 0, 0, 0.45);
@disabled-color: rgba(0, 0, 0, 0.25);
@border-color-base: #d9d9d9;
@border-radius-base: 4px;
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
@loading-color: @primary-color;

// .ant-layout.ant-layout-has-sider>.ant-layout,
.ant-layout.ant-layout-has-sider>.ant-layout-content {
  width: auto;
}

.ant-layout-sider-children .logo-image {
  width: @logo-width;
  height: @logo-height;
}

.user-layout {
  &-logo {
    width: @banner-width;
    height: @banner-height;
  }
}

.exception {
  .img {
    img {
      width: @error-width;
      height: @error-height;
    }
  }
}

a {
  color: @link-color;
  background-color: transparent;

  &:hover {
    color: @link-hover-color;
  }
}

.ant-message-info .anticon,
.ant-message-loading .anticon {
  color: @loading-color;
}

#nprogress {
  .bar {
    background-color: @loading-color;
  }
}

.sider.light .logo {
  background-color: @logo-background-color;
  box-shadow: 1px 1px 0px 0px #e8e8e8;
}

.sider.dark .logo {
  background-color: @project-nav-background-color;
}

.sider.light {
  background: @navigation-background-color;

  .ant-menu-submenu > .ant-menu {
    background: @navigation-background-color;
  }
}

.sider.light .ant-menu-light {
  background: @navigation-background-color;
}

.ant-menu-submenu-popup {
  left: 83px !important;
}

.ant-menu-submenu-popup.ant-menu-light,
.ant-menu-light > .ant-menu {
  background: @navigation-background-color;
}

.ant-menu-item > a
{
  color: @navigation-text-color;
}

.ant-menu-item-selected > a, .ant-menu-item-selected > a:hover {
  color: @primary-color;
}

.custom-icon path {
  fill: @navigation-text-color;
}

.ant-menu-light {
  .ant-menu-item:hover > a,
  .ant-menu-submenu-title:hover > a,
  .ant-menu-submenu-title:hover,
  .ant-menu-item:hover,
  .ant-menu-submenu-title:hover {
    .custom-icon path {
      fill: @primary-color;
    }
  }
}

.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: @primary-color-light;
}

.ant-menu-item:active,
.ant-menu-submenu-title:active {
  background: @primary-color-light;
}

.list .item:hover {
  background: @primary-color-light;
}

.ant-menu-vertical .ant-menu-item,
.ant-menu-vertical-left .ant-menu-item,
.ant-menu-vertical-right .ant-menu-item,
.ant-menu-inline .ant-menu-item,
.ant-menu-vertical .ant-menu-submenu-title,
.ant-menu-vertical-left .ant-menu-submenu-title,
.ant-menu-vertical-right .ant-menu-submenu-title,
.ant-menu-inline .ant-menu-submenu-title {
  color: @navigation-text-color;
}

.ant-menu-submenu-vertical ant-menu-submenu-selected,
.ant-menu-vertical .ant-menu-submenu-selected,
.ant-menu-vertical-left .ant-menu-submenu-selected,
.ant-menu-vertical-right .ant-menu-submenu-selected {
  color: @primary-color;

  .ant-menu-submenu-title {
    color: @primary-color;
  }
}

.ant-menu-item .anticon .custom-icon {
  fill: @navigation-text-color;
}

.ant-menu-dark .ant-menu-item {
  .anticon .custom-icon {
    fill: @project-nav-text-color;
  }

  &.ant-menu-item-selected {
    .anticon .custom-icon {
      fill: #fff;
    }
  }
}

.ant-menu-item a {
  .anticon .custom-icon {
    transition: fill 0.3s ease-out;
  }
  &:hover .anticon .custom-icon {
    fill: @primary-color;
  }
}

.ant-menu-dark .ant-menu-item:hover .anticon .custom-icon {
  fill: #fff;
}

.ant-menu-item:hover,
.ant-menu-item-active,
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active,
.ant-menu-submenu-title:hover
{
  color: @primary-color;

  .custom-icon path {
    color: @primary-color;
  }
}

.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after {
  background-color: @navigation-text-color;
}

.sider.dark {
  .ant-menu-vertical .ant-menu-item,
  .ant-menu-vertical-left .ant-menu-item,
  .ant-menu-vertical-right .ant-menu-item,
  .ant-menu-inline .ant-menu-item,
  .ant-menu-vertical .ant-menu-submenu-title,
  .ant-menu-vertical-left .ant-menu-submenu-title,
  .ant-menu-vertical-right .ant-menu-submenu-title,
  .ant-menu-inline .ant-menu-submenu-title {
    color: @project-nav-text-color;
  }

  .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
  .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
  .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
  .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
  .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
  .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
  .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
  .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after
  {
    background-color: @project-nav-text-color;
  }

  .ant-menu-submenu-active .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
  .ant-menu-submenu-active .ant-menu-submenu-title .ant-menu-submenu-arrow::after
  {
    background-color: @primary-color;
  }

  .ant-menu-dark .ant-menu-item:hover > a,
  .ant-menu-dark .ant-menu-submenu-title:hover > a,
  .ant-menu-dark .ant-menu-submenu-title:hover,
  .ant-menu-dark .ant-menu-item:hover,
  .ant-menu-dark .ant-menu-submenu-title:hover
  {
    color: @primary-color;

    .custom-icon path {
      color: @primary-color;
      fill: @primary-color;
    }
  }

  .ant-menu-submenu-selected {
    .ant-menu-submenu-title {
      color: @primary-color;
    }
  }
}

.ant-menu-dark,
.ant-menu-dark .ant-menu-sub,
.ant-menu-dark .ant-menu-inline.ant-menu-sub{
  background-color: @project-nav-background-color;
}

.ant-menu-dark .ant-menu-item,
.ant-menu-dark .ant-menu-item-group-title,
.ant-menu-dark .ant-menu-item > a {
  color: @project-nav-text-color;
}

.ant-menu-dark .ant-menu-item:hover > a,
.ant-menu-dark .ant-menu-submenu-title:hover > a,
.ant-menu-dark .ant-menu-submenu-title:hover,
.ant-menu-dark .ant-menu-item:hover,
.ant-menu-dark .ant-menu-submenu-title:hover
{
  color: @primary-color;

  .custom-icon path {
    color: @primary-color;
    fill: @primary-color;
  }
}

.ant-menu {
  &-inline-collapsed {
    .ant-menu-item,
    .ant-menu-submenu-title {
      left: 0;
      text-overflow: clip;
      margin-right: 10px;

      .ant-menu-submenu-arrow {
        display: none;
      }
    }
  }

  &-inline-collapsed-tooltip {
    .ant-tooltip-inner {
      a {
        color: #c6c3c3;
      }

      .anticon {
        margin-right: 5px;
      }
    }
  }
}

.ant-menu-item .ant-menu-item-icon + span,
.ant-menu-item .anticon + span,
.ant-menu-submenu-title .ant-menu-item-icon + span,
.ant-menu-submenu-title .anticon + span {
  margin-left: 0;
}

.ant-form-item-label > label > .anticon {
  margin-left: 5px;
}

.action-button {
  text-align: right;
  padding-top: 15px;

  button, a.ant-btn {
    margin-right: 5px;
  }
}

@media only screen and (max-width: 576px) {
  .ant-pagination-options {
    display: inline-block;
  }
}

.user-layout {
  background: #ffffff;

  .ant-input-affix-wrapper .ant-input-prefix,
  .ant-input-affix-wrapper .ant-input-suffix {
    color: rgba(0,0,0,.25);
  }
}

.footer {
  .line {
    a {
      color: rgba(0, 0, 0, .45);

      &:hover {
        color: rgba(0, 0, 0, .65);
      }
    }
  }

 .copyright {
    color: rgba(0, 0, 0, .45);
  }
}

.ant-tree-icon__customize {
  color: rgba(0, 0, 0, 0.45);
  background: #fff;
}

.form-content {
  background-color: #fafafa;
}

.zone-support {
  background: #fafafa;
}

.anticon {
  &-info-circle {
    color: rgba(0,0,0,.45);
  }
}

.light-row {
  background-color: #fff;
}

.dark-row {
  background-color: #f9f9f9;
}

.child-row {
  background-color: #f5f5f5;
}

.tag-disabled-input, .btn-add-tag {
  background-color: #fff;
}

.tagsTitle {
  color: rgba(0, 0, 0, 0.85);
}

.ant-btn.filter-button:hover,
.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover,
.ant-dropdown-menu-item > a:hover,
.ant-dropdown-menu-submenu-title > a:hover {
  color: @primary-color;
}

.drawer {
  .img-checkbox {
    .check-icon.light {
      color: #000;
    }
    .check-icon.dark {
      color: #ffffff;
    }
  }

  .color-checkbox {
    .check-icon {
      color: #ffffff;
    }
  }

  .input-group .color-picker {
    border-color: @primary-color;
  }
}

.custom-suffix-icon {
  color: #999;
}

.ant-dropdown-menu-item a {
  color: @text-color;
}

.ant-list-item-meta-content {
  width: auto;
}

.ant-list-item.selected-item {
  background-color: @primary-color-light;
}

.ant-select-arrow .anticon {
  vertical-align: top;
}

.button-clear-notification {
  position: fixed;
  right: 287px;
  top: 35px;
  z-index: 1001;
}

.ant-table-thead > tr.ant-table-row-hover > td,
.ant-table-tbody > tr.ant-table-row-hover > td,
.ant-table-thead > tr:hover > td,
.ant-table-tbody > tr:hover > td {
  background: @primary-color-light !important;
}

.ant-divider, .ant-card-bordered {
  border-color: #e8e8e8 !important;
}

.ant-list-sm .ant-list-item {
  padding-left: 0;
  padding-right: 0;
}

.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  background-color: color(~`colorPalette("@{primary-color}", 1)`) !important;
}

.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover {
  background-color: color(~`colorPalette("@{primary-color}", 1)`) !important;
}

.ant-tabs.tab-center {
  > .ant-tabs-nav, > div > .ant-tabs-nav,
  > .ant-tabs-nav .ant-tabs-nav-wrap,
  > div > .ant-tabs-nav .ant-tabs-nav-wrap {
    justify-content: center;
  }
}

.ant-tabs-large>.ant-tabs-nav .ant-tabs-tab {
  padding: 16px;
}

.ant-tabs-left>.ant-tabs-nav .ant-tabs-tab {
  padding: 8px 24px 8px 8px;
  text-align: center;
}

.ant-steps {
  &-item-container {
    &:hover {
      .ant-steps-item-content .ant-steps-item-description {
        color: inherit !important;
      }
    }
  }

  &-item-process {
    .ant-steps-item-content .ant-steps-item-title {
      color: inherit !important;
      font-weight: 600;
    }
  }
}