@fc-components/menu/src/Float/index.less

The Menu component used for flashcat.

.fc-menu-icon {
  display: flex;
  width: 48px;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-size: 16px;
  color: var(--icon-color);
  .iconpark-icon {
    width: 16px;
  }
}
@menu-height: 42px;
.fc-menu-label {
  padding-left: 8px;
  font-size: 14px;
}
.float-fc-menu-sub:has(+ .float-fc-menu-sub-hover) .fc-menu-sub-curve {
  &::before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 0 0 19px 0;
    background: var(--background-color);
  }
  position: absolute;
  width: 19px;
  bottom: 0px;
  height: 19px;
  right: 0px;
  background-color: #f9f9f9;
}

.float-fc-menu-divider:has(+ .float-fc-menu-sub-hover) .fc-menu-sub-curve {
  bottom: -9px;
  right: -16px;
}

.float-fc-menu-sub-hover + .float-fc-menu-sub > .fc-menu-sub-curve {
  &::before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 0 19px 0 0;
    background: var(--background-color);
  }
  position: absolute;
  width: 19px;
  top: 0px;
  height: 19px;
  right: 0px;
  background-color: #f9f9f9;
}

.float-fc-menu-sub-hover + .float-fc-menu-divider > .fc-menu-sub-curve {
  top: -8px;
  right: -16px;
}

.fc-menu-bay {
  background-color: #f9f9f9;
  & > .fc-menu-sub-left {
    position: absolute;
    height: 100%;
    width: 8px;
    top: 0px;
    left: 0px;
    background-color: var(--background-color);
    z-index: 1;
  }
  & > .fc-menu-sub-topleft-corner {
    position: absolute;
    height: 19px;
    width: 20px;
    top: 0px;
    left: 8px;
    background-color: var(--background-color);
    &::before {
      display: block;
      content: '';
      width: 100%;
      height: 100%;
      border-radius: 20px 0 0 0;
      background: #f9f9f9;
    }
  }
  .fc-menu-sub-bottomleft-corner {
    position: absolute;
    height: 19px;
    width: 20px;
    bottom: 0px;
    left: 8px;
    z-index: 1;
    background-color: var(--background-color);
    &::before {
      display: block;
      content: '';
      width: 100%;
      height: 100%;
      border-radius: 0 0 0 20px;
      background: #f9f9f9;
    }
  }
}

.float-fc-menu {
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  flex: 1;
  width: 152px;
  height: 100%;
  overflow-y: auto;
  background-color: var(--background-color);
  color: var(--text-color);
  cursor: pointer;
  border-radius: 0 0 8px 8px;
  &::-webkit-scrollbar {
    width: 0px; /* 设置滚动条宽度 */
  }
  &-divider {
    border-bottom: 1px solid var(--divider-color);
    margin: 8px 16px;
  }
  &.collapsed {
    width: 48px;
    .float-fc-menu-item-icon,
    .float-fc-menu-sub-title-icon {
      height: @menu-height;
    }
  }
  &.hide {
    width: 0px;
    overflow: hidden;
  }
  &-sub {
    position: relative;
    &-hide {
      display: none;
    }
    &-selected {
      .float-fc-menu-sub-title,
      .float-fc-menu-sub-title-icon {
        color: var(--icon-selected-color);
      }
      svg.selected {
        position: absolute;
        top: 2px;
        right: 0px;
      }
      .red-dot {
        position: absolute;
        left: 12px;
        top: 10px;
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: #ff656b64;
      }
    }
    &-selected:not(&-hover) {
      .float-fc-menu-sub-title:hover {
        color: var(--text-selected-color);
      }
    }
    &-hover {
      height: auto;
      .float-fc-menu-sub-title {
        color: var(--text-hover-color);
      }
      height: auto;
      background-color: #f9f9f9;
      color: #666;
      .fc-menu-bay();
      .float-fc-menu-sub-title-icon {
        color: var(--text-hover-color);
      }
    }
    &-title {
      &:hover {
        color: var(--text-hover-color);
      }
      font-size: 14px;
      line-height: @menu-height;
      display: flex;
      &-icon {
        .fc-menu-icon();
      }
      &-label {
        .fc-menu-label();
        &-collapsed {
          display: none;
        }
      }
    }
    .fc-menu-item {
      height: 45px;
      line-height: 34px;
      &-label {
        flex: 1;
        .fc-menu-label();
        font-size: 12px;
      }
    }
  }
  .collapse-btn {
    &:hover {
      background: rgba(108, 83, 177, 0.8);
    }
    width: 24px;
    height: 24px;
    position: fixed;
    left: 0px;
    top: 0px;
    color: #fff;
    background: rgba(108, 83, 177, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    > div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
  }
}

.float-fc-menu-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 0 10px 10px;
  left: 0;
  width: 152px;
  box-sizing: content-box;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  .float-fc-menu-header {
    display: flex;
    justify-content: center;
    width: 100%;
    border-radius: 8px 8px 0 0;
    background: var(--background-color);
    padding-top: 5px;
  }
  .float-fc-menu-sub {
    &-hide {
      display: block;
    }
    &-title-label {
      display: block;
      width: 100%;
      flex: 1;
      overflow: hidden;
      text-overflow: clip;
      white-space: nowrap;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      &-collapsed {
        color: transparent;
        width: 0px;
        padding-left: 0px;
      }
    }
  }
  .float-fc-menu {
    width: 100%;
    &.collapsed {
      width: 100% !important;
    }
    &.hide {
      width: 100% !important;
    }
  }
  &-collapse {
    width: 48px;
  }
  &-hide {
    padding-left: 0;
    width: 0px;
    left: -68px;
  }
  // &.hide {
  //   transform: translateX(-68px);
  // }
  .float-fc-menu {
    &.hide {
      width: 48px;
    }
  }
}

.float-fc-menu-sub-tooltip {
  &.ant-tooltip-placement-right {
    padding-left: 0px;
  }
  &.float-fc-menu-sub-tooltip-single-child {
    .ant-tooltip-inner {
      border-radius: 14px;
      .ant-menu::after {
        border-radius: 14px;
      }
    }
  }
  .ant-tooltip-inner {
    padding: 0px;
    border-radius: 20px;
    background: none;
    border: 0 solid #6c53b1;
    box-shadow: 0 0 8px 0 rgba(108, 83, 177, 0.32);
    margin-left: -4px;
    background: rgba(249, 249, 249, 0.88);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    .collapse-menu-title {
      font-size: 14px;
      color: #666666;
      font-weight: 600;
      padding: 12px 12px 0;
    }
    .ant-menu {
      min-width: 112px;
      max-width: 200px;
      padding: 8px;
      border-radius: 20px;
      border-right: none;
      background: none;
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        border-radius: 20px;
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
      }
      &-title-content {
        font-size: 12px;
      }
      &-item {
        text-align: center;
        color: #333;
        height: @menu-height;
        line-height: @menu-height;
        margin-top: 0px;
        margin-bottom: 0px;
        border-radius: 8px;
        &-active {
          color: var(--text-hover-color);
        }
        &-selected {
          color: #fff;
          background-color: var(--sub-menu-selected-bg);
        }
      }
    }
  }
  .ant-tooltip-arrow {
    display: none;
  }
}
.fc-skim-menu-tooltip {
  left: 10px !important;
  top: 18px !important;
  .ant-tooltip-inner {
    padding: 0px;
    border-radius: 7px;
  }
  .ant-tooltip-arrow {
    display: none;
  }
}
.fc-skim-menu {
  width: 218px;
  border-radius: 7px;
  padding: 16px 24px;
  background: var(--background-color);
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  &-primary {
    color: var(--sub-skim-menu-primary-color);
    & > div {
      &:hover {
        font-size: 14px;
        color: var(--sub-skim-menu-primary-hover-color);
        background: var(--sub-skim-menu-selected-bg);
        border-radius: 7px;
      }
      padding: 0px 8px;
      height: 34px;
      line-height: 34px;
    }
  }
  &-secondary {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    &-wrap {
      border-left: 2px solid var(--sub-skim-menu-selected-bg);
      & > div {
        position: relative;
        color: var(--sub-skim-menu-second-color);
        &:hover {
          color: var(--sub-skim-menu-second-hover-color);
          &::before {
            content: '';
            position: absolute;
            top: 0px;
            left: -2px;
            height: 30px;
            width: 2px;
            background: var(--sub-skim-menu-second-border-hover-color);
          }
        }
        padding: 6px;
      }
    }
  }
}
.quick-start-modal {
  .ant-modal-content {
    border-radius: 20px;
  }
  .ant-modal-body {
    padding: 8px;
    .quick-menu-title {
      font-size: 14px;
      color: #333;
      background: #f1f1f2;
      border-radius: 4px;
      padding: 0 16px;
      height: 38px;
      display: flex;
      align-items: center;
    }

    .quick-menu-item {
      cursor: pointer;
      padding: 0 16px;
      border-radius: 4px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &.active {
        background: var(--sub-menu-selected-bg);
        color: #fff;
        .quick-menu-icon {
          color: #fff;
        }
      }
      .primary-menu {
        display: inline-block;
        width: 72px;
      }
      .anticon {
        font-size: 18px;
        cursor: pointer;
        &.unstar {
          color: #ffde5c;
        }
        &.stared {
          color: #e3e4e6;
        }
      }
    }
    .quick-menu-icon {
      & > svg {
        width: 18px;
        height: 18px;
      }
      color: rgba(108, 83, 177, 0.48);
      margin-right: 8px;
    }
  }
  .ant-input-affix-wrapper {
    border-color: #e3e4e6;
    border-radius: 16px;
  }
}