gitea-banana-theme/styles/components/navbar.ts

import { fallbackVar } from "src/functions";
import { css, customThemeVars, themeVars } from "src/types/vars";

export const navbarRight = css`
  #navbar {
    border-bottom: 0;
    padding: 0px 16px;
    min-height: 64px;
    background-color: ${themeVars.color.nav.bg}; // 添加背景色
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
    .navbar-left {
      gap: 8px;
      > .item {
        padding: 4px 8px;
        min-height: 20px;
        border-radius: 8px; // 增加圆角
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
        &.active {
          font-weight: 600;
          background-color: ${themeVars.color.active}; // 添加背景色
        }
        &#navbar-logo {
          // 与下方的用户切换头像对齐
          padding-left: 6px;
          &:hover {
            background: unset;
          }
          img {
            height: 32px;
            width: 32px;
          }
        }
        &:hover:not(#navbar-logo) {
          background-color: ${themeVars.color.nav.hoverBg};
          // 移除 transform 以避免创建新的层叠上下文
          // transform: translateY(-1px); // 轻微上移效果
        }
      }
    }
    // 进入用户页面后, 避免注册, 登录和首页等意外覆盖
    .navbar-right:has(.user-menu) {
      gap: 8px;
      // 右侧按钮, 但不包括头像
      > .item:not(:last-child) {
        display: grid;
        gap: 4px;
        grid-auto-columns: max-content;
        align-items: center;
        align-content: center;
        justify-content: center;
        border: 1px solid ${themeVars.color.light.border};
        border-radius: 8px; // 增加圆角
        padding: unset;
        height: 36px; // 增加高度
        min-width: 36px; // 增加最小宽度
        min-height: 36px; // 增加最小高度
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
        // 纠正内容保证居中
        .tw-relative {
          height: 16px;
          width: 16px;
        }
        .svg {
          color: ${themeVars.color.text.light.num1};
        }
        // 带下拉菜单的按钮
        &.ui.dropdown {
          padding: 0 12px; // 增加内边距
          .text {
            display: grid;
            grid-auto-flow: column;
            align-items: center;
            > svg {
              margin-right: 4px;
            }
            // 三角号纠正高度保持居中
            .not-mobile {
              height: 16px;
            }
          }
          &:hover {
            background-color: ${themeVars.color.nav.hoverBg};
            // 移除 transform 以避免创建新的层叠上下文
            // transform: translateY(-1px); // 轻微上移效果
          }
        }
        &:hover:not(.ui.dropdown) {
          background-color: ${themeVars.color.nav.hoverBg};
          // 移除 transform 以避免创建新的层叠上下文
          // transform: translateY(-1px); // 轻微上移效果
        }
      }
      .item.ui.dropdown {
        // 头像菜单
        &:last-child {
          padding-left: 2px; // 调整此选项需同步增减相同的标识的 left
          padding-right: 16px;
          .text {
            // 不显示小箭头标识
            > .not-mobile {
              display: none;
            }
            // 头像
            img {
              border-radius: 25px;
              height: 36px; // 增加高度
              max-height: 36px; // 增加最大高度
              width: 36px; // 增加宽度
              transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
              &:hover {
                // 移除 transform 以避免创建新的层叠上下文
                // transform: scale(1.05); // 轻微放大效果
              }
            }
          }
        }
        // 用户头像的管理员标识
        .navbar-profile-admin {
          background-color: ${themeVars.github.bgColor.accent.emphasis};
          border-radius: 25px;
          border: 2px solid ${themeVars.color.nav.bg};
          color: ${themeVars.color.white};
          font-size: 9px;
          font-weight: 600;
          padding: 2px 5px;
          top: -7px;
          left: 21px;
        }
      }
      // 通知和计时器的圆点
      a.item {
        .notification_count,
        .header-stopwatch-dot {
          background-color: ${themeVars.github.bgColor.accent.emphasis};
          border-radius: 25px;
          color: ${themeVars.color.white};
          font-size: 9px;
          font-weight: 600;
          top: -15px;
          left: 11px;
          min-width: 18px; // 设置最小宽度
          height: 18px; // 设置高度
          display: flex; // 使用弹性布局
          align-items: center; // 垂直居中
          justify-content: center; // 水平居中
        }
      }
    }
    // 用户菜单
    .navbar-right .user-menu {
      width: ${fallbackVar(customThemeVars.userMenuWidth, "192px")};
      max-width: 320px;
      border-radius: 12px; // 增加圆角
      box-shadow: ${themeVars.github.shadow.floating.small}; // 增强阴影
      > .header {
        font-size: 14px;
        font-weight: 400;
        margin: 0;
        padding: 16px 16px 8px 16px;
        strong {
          font-weight: 600;
        }
      }
      > .divider {
        margin: 8px;
        width: calc(100% - 16px);
      }
    }
  }
  // 手机下的创建菜单按钮
  @media (max-width: 767.98px) {
    #navbar .navbar-right:has(.user-menu) > .item:not(:last-child) {
      display: none;
    }
    #navbar.navbar-menu-open .navbar-right:has(.user-menu) > .item:not(:last-child) {
      display: grid;
    }
  }
  
  // 移动端优化
  @media (max-width: 767.98px) {
    #navbar {
      padding: 0px 12px; // 调整内边距
      min-height: 56px; // 调整最小高度
    }
    
    #navbar .navbar-left > .item {
      padding: 4px 6px; // 调整内边距
      min-height: 16px; // 调整最小高度
    }
    
    #navbar .navbar-right:has(.user-menu) > .item:not(:last-child) {
      height: 32px; // 调整高度
      min-width: 32px; // 调整最小宽度
      min-height: 32px; // 调整最小高度
      padding: 0 8px; // 调整内边距
    }
  }
`;

// 二级导航栏
export const secondaryNav = css`
  .page-content > :first-child.secondary-nav {
    margin-bottom: 16px;
    // 仪表板界面的二级导航栏用户菜单
    > .ui.secondary.stackable.menu {
      gap: 0px;
      min-height: 48px;
      padding: 8px 0; // 增加内边距
      border-radius: 12px; // 增加圆角
      background-color: ${themeVars.color.box.header}; // 添加背景色
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
      > .item {
        padding: 0 16px; // 增加内边距
        border-radius: 8px; // 增加圆角
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
        > .ui.dropdown > .text {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          svg {
            margin-right: 4px;
          }
        }
        &:hover {
          background-color: ${themeVars.color.hover.self};
          // 移除 transform 以避免创建新的层叠上下文
          // transform: translateY(-1px); // 轻微上移效果
        }
        &.active {
          background-color: ${themeVars.color.active};
          font-weight: 600;
        }
      }
      > .right.menu {
        gap: 4px;
      }
    }
  }
  
  // 移动端优化
  @media (max-width: 767.98px) {
    .page-content > :first-child.secondary-nav > .ui.secondary.stackable.menu {
      flex-wrap: wrap; // 允许换行
      min-height: auto; // 自适应高度
      padding: 8px; // 调整内边距
      > .item {
        padding: 8px 12px; // 调整内边距
        margin: 4px; // 增加边距
      }
    }
  }
`;