skyline/src/styles/base.less

@import 'variables.less';

:global {
  body {
    font-family: @font-family;
  }

  .code {
    display: block;
    padding: 12px;
    background-color: @light-color01;
    border: 1px solid @light-color04;
  }

  .hover-show {
    visibility: hidden;
  }

  .item-name {
    display: flex;
    color: @text-color;
    font-weight: 600;
    font-size: @body-size;
    font-family: @font-family-id;

    .icon {
      align-self: center;
      margin-right: 8px;
    }

    &:hover {
      strong {
        color: @primary;
      }
    }
  }

  .hidden-input {
    position: absolute;
    width: 0;
    opacity: 0;
  }

  .header-shadow {
    box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 6%) !important;
  }

  .apps-dark-header {
    background-color: @dark-color08 !important;
  }

  .loading {
    margin-top: 100px;
    text-align: center;
  }

  .custom-icon {
    svg {
      width: 16px;
      height: 16px;
      color: @icon-color;
      fill: #b6c2cd;
    }

    &:hover {
      svg {
        color: @primary-color;
        fill: #6fb4f5;
      }
    }
  }

  .sl-page {
    &-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1000;
      transform: translate(-50%, -50%);
    }

    &-body {
      background-color: @body-bg-color;
    }

    &-side {
      position: fixed;
      top: 88px;
      z-index: 2;
      width: @nav-width;
      padding: 0 20px 40px;

      @media (max-width: 1366px) {
        width: @narrow-nav-width;
      }

      &-title {
        position: relative;
        padding: 24px 8px;

        .icon {
          margin-right: 12px;
        }

        .h3 {
          display: inline-block;
          font-size: 23px;
          line-height: 1.33;
          text-shadow: 0 2px 4px rgba(36, 46, 66, 10%);
          vertical-align: middle;
        }
      }

      &-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        border-style: solid;
        border-width: 1px 0 0;
        border-image-source: radial-gradient(
          circle at 50% 50%,
          #e3e9ef,
          rgba(216, 216, 216, 0%)
        );
        border-image-slice: 1;
      }
    }

    &-nav {
      z-index: 1;
      width: auto;
      height: calc(100vh - 188px);
      margin-right: -12px;
      padding: 0 12px 0 0;
      overflow-y: auto;
    }

    &-main {
      margin-left: @nav-width - 20px;
      padding: 20px;
      overflow-x: hidden;
      overflow-y: auto;

      @media (max-width: 1366px) {
        margin-left: @narrow-nav-width - 20px;
      }
    }
  }

  [data-tooltip]:hover {
    &::before {
      position: absolute;
      bottom: -26px;
      z-index: 100;
      display: inline-block;
      padding: 3px 6px;
      color: #fff;
      white-space: nowrap;
      background: #000;
      border-radius: 2px;
      content: attr(data-tooltip);
    }
  }

  .sl-table,
  .sl-simple-table {
    .ant-table-thead > tr > th {
      background: rgba(0, 104, 255, 2%);
    }

    .ant-table-thead th.ant-table-column-has-sorters:hover {
      background: rgba(0, 104, 255, 10%);
    }

    .ant-table-tbody > tr.ant-table-row-selected > td,
    .ant-table-tbody > tr.ant-table-row:hover > td {
      background-color: @table-row-selected-background;
    }

    td.ant-table-column-sort {
      background: inherit;
    }

    .ant-table-column-sorters {
      padding: 16px 0;
    }

    .ant-table-footer {
      padding: 8px 16px;
    }

    .ant-table-thead > tr > th.ant-table-selection-column:first-child {
      padding-left: 8px;
    }

    .ant-checkbox-inner {
      width: @table-checkbox-size;
      height: @table-checkbox-size;
    }
  }

  .tip {
    color: @color-text-body;
  }

  .link-class {
    color: @blue-1;
    cursor: pointer;
    user-select: none;
  }

  .no-wrap {
    white-space: nowrap;
  }

  .no-margin-bottom {
    margin-bottom: 0 !important;
  }

  .inline-block {
    display: inline-block;
  }

  .sl-form {
    .magic-input-wrapper {
      border-color: @form-item-magic-input-wrapper-border-color;
    }

    .magic-input-wrapper-active {
      border-color: @primary-color;
    }
  }
}