gitea-github-theme/styles/components/explore.ts

/*!
 * Copyright (c) https://github.com/lutinglt
 *
 * See the NOTICE file distributed with this work for additional
 * information regarding copyright ownership.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { css, customThemeVars, otherThemeVars, themeVars } from "@lutinglt/gitea-github-theme/core";
import { fallbackVar } from "@vanilla-extract/css";

const userRepoVar = fallbackVar(customThemeVars.userRepolistColumns, "2");
const exploreRepoVar = fallbackVar(customThemeVars.explore.repolistColumns, "2");
const orgRepoVar = fallbackVar(customThemeVars.org.repolistColumns, "1");

// 仓库列表
export const repoList = css`
  /* 组织 */
  .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
  /* 用户 */
  .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
  /* 探索 */
  .page-content.explore.repositories > .ui.container {
    /* 排除用户的公开活动页 */
    > .flex-list:not(#activity-feed) {
      display: grid;
      > .flex-item {
        border: 1px solid ${themeVars.color.light.border};
        border-radius: ${otherThemeVars.border.radius};
        padding: 16px;
        /* 仓库头像 */
        > .flex-item-leading {
          img,
          svg {
            color: ${themeVars.color.text.light.num1};
          }
        }
        /* 仓库信息 */
        > .flex-item-main {
          /* 仓库标题 */
          > .flex-item-header {
            /* 仓库名称 */
            > .flex-item-title {
              gap: 8px;
              /* 仓库中间的间隔线 */
              &:not(a) {
                color: ${themeVars.color.text.light.num1};
              }
            }
            /* 仓库语言, 星标 */
            > .flex-item-trailing {
              color: ${themeVars.color.text.light.num1};
              gap: 16px;
              font-size: 12px;
              > .flex-text-inline .color-icon {
                width: 12px;
                height: 12px;
                margin-right: 0 !important;
              }
            }
          }
          /* 描述和更新时间 */
          > .flex-item-body {
            margin-top: 8px;
            /* 更新时间 */
            &:last-child {
              font-size: 12px;
            }
          }
          /* 主题标签 */
          > .label-list {
            margin-top: 8px;
          }
        }
      }
    }
  }
  /* 仓库列表列数 */
  /* 组织 */
  .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven > .flex-list {
    grid-template-columns: repeat(${orgRepoVar}, 1fr);
    gap: min(${orgRepoVar} * 8px, 16px);
  }
  /* 用户 */
  /* 排除用户的公开活动页 */
  .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve > .flex-list:not(#activity-feed) {
    grid-template-columns: repeat(${userRepoVar}, 1fr);
    gap: min(${userRepoVar} * 8px, 16px);
  }
  /* 探索 */
  .page-content.explore.repositories > .ui.container > .flex-list {
    grid-template-columns: repeat(${exploreRepoVar}, 1fr);
    gap: min(${exploreRepoVar} * 8px, 16px);
  }
`;

const exploreUserVar = fallbackVar(customThemeVars.explore.userlistColumns, "3");
const orgUserVar = fallbackVar(customThemeVars.org.userlistColumns, "2");

// 用户列表
export const userList = css`
  /* 组织 */
  .page-content.organization.members > .ui.container,
  /* 探索的用户和组织 */
  .page-content.explore.users > .ui.container {
    > .flex-list {
      display: grid;
      > .flex-item {
        border: 1px solid ${themeVars.color.light.border};
        border-radius: ${otherThemeVars.border.radius};
        padding: 16px;
        > .flex-item-main {
          /* 用户名称 */
          > .flex-item-title {
            gap: 8px;
            margin-bottom: 8px;
            /* 用户标签 */
            > .label {
              font-size: 12px;
            }
          }
          /* 用户描述 */
          > .flex-item-body {
            font-size: 12px;
            svg {
              width: 12px;
              min-width: 12px;
            }
          }
        }
      }
    }
  }
  /* 用户列表列数 */
  /* 组织 */
  .page-content.organization.members > .ui.container > .flex-list {
    grid-template-columns: repeat(${orgUserVar}, 1fr);
    gap: min(${orgUserVar} * 8px, 16px);
  }
  /* 探索的用户和组织 */
  .page-content.explore.users > .ui.container > .flex-list {
    grid-template-columns: repeat(${exploreUserVar}, 1fr);
    gap: min(${exploreUserVar} * 8px, 16px);
  }
`;

// 手机下的仓库和用户列表
export const mobileList = css`
  @media (max-width: 767.98px) {
    /* 组织的仓库列表 */
    .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
    /* 用户的仓库列表 */
    .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
    /* 探索的仓库列表 */
    .page-content.explore.repositories > .ui.container,
    /* 组织的成员列表 */
    .page-content.organization.members >.ui.container,
    /* 探索的用户和组织列表 */
    .page-content.explore.users >.ui.container {
      /* 排除用户的公开活动页 */
      > .flex-list:not(#activity-feed) {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }
  }
`;

// 统一无搜索结果时的样式
export const notMatch = css`
  /* 组织的仓库列表 */
  .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
  /* 用户的仓库列表 */
  .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
  /* 探索的仓库列表 */
  .page-content.explore.repositories > .ui.container,
  /* 组织的成员列表 */
  .page-content.organization.members >.ui.container,
  /* 探索的用户和组织列表 */
  .page-content.explore.users >.ui.container {
    /* 排除用户的公开活动页 */
    > .flex-list:not(#activity-feed) {
      &:has(> div:only-child):not(:has(.flex-item-main)) {
        grid-template-columns: 1fr;
        > div {
          border: 1px solid ${themeVars.color.light.border};
          border-radius: ${otherThemeVars.border.radius};
          font-size: 16px;
          font-weight: 500;
          padding: 32px;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
`;