统一无搜索结果时的样式 #20

CHANGELOG.md

@@ -5,6 +5,7 @@
 ##### 更符合 GitHub 风格
 
 - 修复并同步工单或 PR 详细页面下的标签菜单样式 #19
+- 统一无搜索结果时的样式 #20
 - 同步页脚样式
 - 优化下拉菜单的样式
 - 优化创建标签菜单的菜单项的样式
@@ -13,7 +14,6 @@
 
 ### 🐞 Fix
 
-- 修复仓库探索无搜索结果时的样式 #20
 - 修复 Wiki 页面搜索项目没有正确隐藏的问题 #15
 - 修复后台账户管理排序菜单项的宽度问题
 - 修复合并提交中的主色调按钮组阴影问题

styles/components/explore.ts

@@ -7,12 +7,6 @@ const orgRepoVar = fallbackVar(customThemeVars.org.repolistColumns, "1");
 
 // 仓库列表
 export const repoList = css`
-  // 修复仓库探索无搜索结果时的样式, 该样式与 .flex-item 的样式保持一致
-  .page-content.explore.repositories > .ui.container > .flex-list:not(#activity-feed) > div:only-child {
-    border: 1px solid ${themeVars.color.light.border};
-    border-radius: ${otherThemeVars.border.radius};
-    padding: 16px;
-  }
   // 组织
   .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
   // 用户
@@ -163,3 +157,33 @@ export const mobileList = css`
     }
   }
 `;
+
+// 统一无搜索结果时的样式
+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;
+        }
+      }
+    }
+  }
+`;