同步探索页面仓库样式

.github/release.md

@@ -4,3 +4,4 @@
 
 - 同步 Issue/PR 的评论样式
 - 同步表情菜单样式
+- 同步探索页面仓库样式

README.md

@@ -74,7 +74,3 @@ THEMES = gitea-dark, github-dark
 ## 贡献
 
 欢迎提交 Issue 或 Pull Request
-
-```
-
-```

styles/components/explore.ts

@@ -0,0 +1,69 @@
+import { css, otherThemeVars, themeVars } from "src/types/vars";
+
+// 仓库列表
+export const repositoriesExplore = 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 {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 16px;
+
+      > .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};
+              }
+              // 仓库类型和状态标签
+              > .label-list .label {
+                padding: 3px 6px;
+              }
+            }
+            // 仓库语言, 星标
+            > .flex-item-trailing {
+              color: ${themeVars.color.text.light.num1};
+              gap: 16px;
+              font-size: 12px;
+              > .flex-text-inline .tw-mr-2 {
+                margin-right: 0 !important;
+              }
+            }
+          }
+          // 描述和更新时间
+          > .flex-item-body {
+            margin-top: 8px;
+            // 更新时间
+            &:last-child {
+              font-size: 12px;
+            }
+          }
+          // 主题标签
+          > .label-list {
+            margin-top: 8px;
+          }
+        }
+      }
+    }
+  }
+`;

styles/components/index.ts

@@ -3,6 +3,7 @@ import "./clone";
 import "./commit";
 import "./dashboard";
 import "./diff";
+import "./explore";
 import "./filelist";
 import "./heatmap";
 import "./issue";

styles/components/repo.ts

@@ -74,13 +74,13 @@ export const repoMenu = css`
 
 export const repoTopic = css`
   // 理应只能覆盖探索/组织/用户下仓库的 topic 标签
-  .label-list .ui.label,
+  // 避免渲染到仓库的类型标签
+  .flex-item-main > .label-list .ui.label,
   // 仓库文件列表下的 topic 标签
   #repo-topics .ui.label.repo-topic {
     border-radius: 25px;
     font-size: 12px;
     padding: 5px 10px;
-    margin: 0px 1.5px 3.5px 0px;
     background-color: ${themeVars.github.bgColor.accent.muted};
     color: ${themeVars.github.fgColor.accent};
     &:hover {