gitea-themes/styles/components/navbar.ts

// Migrated from .github-theme/styles/components/navbar.ts.

export const navbarRight = `
#navbar {
    padding: 8px 16px; /* 上下内边距 + .navbar-left & .navbar-right 的 min-height = 64px */
    min-height: 64px;
    position: relative;
    z-index: 1000;
    .navbar-left,
    .navbar-right {
      min-height: 48px;
    }
    .navbar-right {
      gap: 8px;
      > .navbar-theme-toggle {
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-light-border);
        border-radius: var(--border-radius);
        color: var(--color-text);
        height: 32px;
        min-height: 32px;
        min-width: 32px;
        padding: 0;
        width: 32px;
        &:hover,
        &.active {
          background-color: var(--color-nav-hoverBg);
        }
      }
    }
    .navbar-left {
      gap: 8px;
      > .item {
        padding: 4px 8px;
        min-height: 20px;
        &.active {
          font-weight: 600;
        }
        &#navbar-logo {
          /* 与下方的用户切换头像对齐 */
          padding-left: 6px;
          &:hover {
            background: unset;
          }
          img {
            height: 32px;
            width: 32px;
          }
        }
      }
    }
    /* 进入用户页面后, 避免注册, 登录和首页等意外覆盖 */
    .navbar-right:has(.user-menu) {
      gap: 8px;
      /* 右侧按钮, 但不包括头像 */
      > .item:not(.navbar-user-menu):not(.navbar-theme-toggle) {
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 1px solid var(--color-light-border);
        border-radius: var(--border-radius);
        padding: 0;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        /* 纠正内容保证居中 */
        .tw-relative {
          height: 16px;
          width: 16px;
        }
        .svg {
          color: var(--color-text-light-1);
        }
        /* 带下拉菜单的按钮 */
        &.ui.dropdown {
          padding: 0 8px;
          .text {
            display: grid;
            grid-auto-flow: column;
            align-items: center;
            > svg {
              margin-right: 4px;
            }
            /* 三角号纠正高度保持居中 */
            .not-mobile {
              height: 16px;
            }
          }
          &:hover {
            background-color: var(--color-nav-hoverBg);
          }
        }
      }
      .item.ui.dropdown {
        /* 头像菜单 */
        &.navbar-user-menu {
          padding: 0;
          .text {
            /* 不显示头像右侧的小箭头下拉菜单标识 */
            > .not-mobile {
              display: none;
            }
            /* 手机下的用户名 */
            > .only-mobile {
              margin-left: 12px;
              font-weight: 600;
            }
            .navbar-avatar {
              /* 头像 */
              img {
                border-radius: 9999px;
                height: 32px;
                max-height: 32px;
                width: 32px;
                max-width: 32px;
                margin: 0 !important;
              }
              /* 管理员标识 */
              .navbar-admin-badge {
                height: 18px;
                min-width: 18px;
                bottom: calc(100% - 32px);
                left: calc(100% - 11px);
                padding: 2px;
                border-color: var(--color-nav-bg); /* 锁定边框色, 避免鼠标悬浮时改变颜色 */
              }
            }
          }
          &.active {
            background: unset;
          }
        }
      }
      /* 通知和计时器的圆点 */
      a.item {
        .notification_count,
        .header-stopwatch-dot {
          background-color: var(--github-bgColor-accent-emphasis);
          border-radius: 9999px;
          border-color: var(--color-nav-bg);
          color: var(--color-white);
          font-size: 9px;
          font-weight: 600;
          top: -15px;
          left: 11px;
        }
      }
    }
    /* 用户菜单 */
    .navbar-right .user-menu {
      z-index: 1001;
      width: var(--custom-user-menu-width, 192px);
      max-width: 320px;
      > .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-menu-open {
        gap: 8px;
      }
      .navbar-mobile-right {
        gap: 8px;
        > .item {
          align-items: center;
          justify-content: center;
          border: 1px solid var(--color-light-border);
          border-radius: var(--border-radius);
          padding: 0;
          height: 32px;
          min-width: 32px;
          min-height: 32px;
          /* 纠正内容保证居中 */
          .tw-relative {
            height: 16px;
            width: 16px;
          }
          .svg {
            margin: 0;
          }
        }
      }
    }
  }
`;

export const stylesheet = [navbarRight].join("\n\n");