salary-management-oneself/src/layouts/BaseLayout/Header/Settings/components/Interface/index.less

@import '~antd/lib/style/themes/variable.less';

.actions {
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.menu {
  width: 300px;
  min-height: 200px;

  .item {
    border-bottom: 1px solid #eee;
    padding: 20px;
    display: flex;

    .title {
      flex: 0 0 40px;
      font-size: 14px;
    }

    .action {
      flex: 1 1 auto;
      padding: 0 10px;
    }
  }
}

.theme-picker {
  display: flex;
  flex-wrap: wrap;

  > div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    margin: 0 5px 5px 5px;
    border-radius: 4px;
    border: 1px solid white;
    cursor: pointer;
    color: white;
  }
}

.layout-picker {
  display: flex;
  padding: 0 10px;
  :global {
    .picker {
      display: flex;

      &-item {
        position: relative;
        width: 44px;
        height: 36px;
        margin-right: 16px;
        overflow: hidden;
        background-color: #f0f2f5;
        border-radius: 4px;
        box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.18);
        cursor: pointer;

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 33%;
          height: 100%;
          background-color: #fff;
          content: '';
        }

        &::after {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 25%;
          background-color: #fff;
          content: '';
        }

        &-realDark {
          background-color: fade(@menu-dark-bg, 85%);

          &::before {
            background-color: fade(@menu-dark-bg, 65%);
            content: '';
          }

          &::after {
            background-color: fade(@menu-dark-bg, 85%);
          }
        }

        // 亮色主题
        &-light {
          &::before {
            background-color: @white;
            content: '';
          }

          &::after {
            background-color: @white;
          }
        }

        // 暗色主题
        &-dark,
          // 侧边菜单布局
        &-side {
          &::before {
            z-index: 1;
            background-color: @menu-dark-bg;
            content: '';
          }

          &::after {
            background-color: @white;
          }
        }

        // 顶部菜单布局
        &-top {
          &::before {
            background-color: transparent;
            content: '';
          }

          &::after {
            background-color: @menu-dark-bg;
          }
        }

        // 顶部菜单布局
        &-mix {
          &::before {
            background-color: @white;
            content: '';
          }

          &::after {
            background-color: @menu-dark-bg;
          }
        }
      }

      &-selectIcon {
        position: absolute;
        right: 6px;
        bottom: 4px;
        color: @primary-color;
        font-weight: bold;
        font-size: 14px;
        pointer-events: none;

        .action {
          color: @primary-color;
        }
      }
    }
  }
}

.base {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}