同步用户点星仓库列表样式

.github/release.md

@@ -7,11 +7,15 @@
 - 同步仓库代码文件页 README 导航栏样式
 - 同步分页菜单样式
 - 同步登录/注册页面样式
+- 优化热力图和动态样式
+- 优化私有标签样式, 组织页面下的 RSS 订阅按钮样式
+- 同步用户点星仓库列表样式
 
 ## 🎈 Perf
 
 - 略微增加仓库代码文件列表的单行高度与 GitHub 一致
-- 优化创建仓库/迁移仓库/创建组织页面的样式与设置页面的样式一致
+- 优化创建仓库/派生仓库/迁移仓库/创建组织页面的样式与设置页面的样式一致
+- 优化消息右上角小图标样式
 
 ## 🐞 Fix
 

TODO.md

@@ -2,7 +2,5 @@
 
 - gitea issue 暗色模式下默认标签颜色匹配使用 github 样式
 - issue/PR 列表样式 github 布局
-- 用户动态仪表板样式优化
 - 色盲主题支持
 - 打开文件时的文件导航树样式和滚动高度
-- 私有库标签大小, 组织页面下的RSS订阅按钮样式

styles/components/dashboard.ts

@@ -2,11 +2,6 @@ import { css } from "src/types/vars";
 
 export const dashboard = css`
   .page-content.dashboard {
-    // 动态的右侧 svg 图标
-    .flex-item .flex-item-trailing svg {
-      height: 20px;
-      width: 20px;
-    }
     // 仓库列表的仓库/组织切换按钮
     .ui.two.item.menu {
       background-color: unset;

styles/components/explore.ts

@@ -38,10 +38,6 @@ export const repoList = css`
               &:not(a) {
                 color: ${themeVars.color.text.light.num1};
               }
-              // 仓库类型和状态标签
-              > .label-list .label {
-                padding: 3px 6px;
-              }
             }
             // 仓库语言, 星标
             > .flex-item-trailing {
@@ -113,7 +109,6 @@ export const userList = css`
             // 用户标签
             > .label {
               font-size: 12px;
-              padding: 3px 6px;
             }
           }
           // 用户描述

styles/components/heatmap.ts

@@ -1,50 +1,84 @@
-import { css, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 export const heatmap = css`
-  .vch__container {
+  #user-heatmap {
-    // 覆盖热力图和图例的背景色
+    .total-contributions {
-    .vch__day__square,
+      left: 25px + 20px;
-    .vch__legend__wrapper rect {
+      bottom: 0 + 12px;
-      // 圆角
+    }
-      rx: 2.5px;
+    .total-contributions,
-      ry: 2.5px;
+    .vch__legend-right {
-      // hover 时的圆角
+      color: ${themeVars.color.text.light.num1};
-      border-radius: 0.75px;
+    }
-      // 宽度和高度可以用来控制间隔
+    .vch__container {
-      width: 9px;
+      padding: 12px 20px;
-      height: 9px;
+      border: 1px solid ${themeVars.color.secondary.self};
-      // 边框
+      border-radius: ${otherThemeVars.border.radius};
-      outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0};
+      // 覆盖热力图和图例的背景色
-      // 边框向内偏移
+      .vch__day__square,
-      outline-offset: -0.5px;
+      .vch__legend__wrapper rect {
+        // 圆角
+        rx: 2.5px;
+        ry: 2.5px;
+        // hover 时的圆角
+        border-radius: 0.75px;
+        // 宽度和高度可以用来控制间隔
+        width: 9px;
+        height: 9px;
+        // 边框
+        outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0};
+        // 边框向内偏移
+        outline-offset: -0.5px;
 
-      &[style="fill: var(--color-secondary-alpha-60);"] {
+        &[style="fill: var(--color-secondary-alpha-60);"] {
-        fill: ${themeVars.github.contribution.default.bgColor.num0} !important;
+          fill: ${themeVars.github.contribution.default.bgColor.num0} !important;
-      }
+        }
 
-      &[style="fill: var(--color-primary-light-4);"] {
+        &[style="fill: var(--color-primary-light-4);"] {
-        fill: ${themeVars.github.contribution.default.bgColor.num1} !important;
+          fill: ${themeVars.github.contribution.default.bgColor.num1} !important;
-        outline-color: ${themeVars.github.contribution.default.borderColor.num1};
+          outline-color: ${themeVars.github.contribution.default.borderColor.num1};
-      }
+        }
 
-      &[style="fill: var(--color-primary-light-2);"] {
+        &[style="fill: var(--color-primary-light-2);"] {
-        fill: ${themeVars.github.contribution.default.bgColor.num2} !important;
+          fill: ${themeVars.github.contribution.default.bgColor.num2} !important;
-        outline-color: ${themeVars.github.contribution.default.borderColor.num2};
+          outline-color: ${themeVars.github.contribution.default.borderColor.num2};
-      }
+        }
 
-      &[style="fill: var(--color-primary);"] {
+        &[style="fill: var(--color-primary);"] {
-        fill: ${themeVars.github.contribution.default.bgColor.num3} !important;
+          fill: ${themeVars.github.contribution.default.bgColor.num3} !important;
-        outline-color: ${themeVars.github.contribution.default.borderColor.num3};
+          outline-color: ${themeVars.github.contribution.default.borderColor.num3};
-      }
+        }
 
-      &[style="fill: var(--color-primary-dark-2);"] {
+        &[style="fill: var(--color-primary-dark-2);"] {
-        fill: ${themeVars.github.contribution.default.bgColor.num4} !important;
+          fill: ${themeVars.github.contribution.default.bgColor.num4} !important;
-        outline-color: ${themeVars.github.contribution.default.borderColor.num4};
+          outline-color: ${themeVars.github.contribution.default.borderColor.num4};
-      }
+        }
 
-      &[style="fill: var(--color-primary-dark-4);"] {
+        &[style="fill: var(--color-primary-dark-4);"] {
-        fill: ${themeVars.github.contribution.default.bgColor.num5} !important;
+          fill: ${themeVars.github.contribution.default.bgColor.num5} !important;
-        outline-color: ${themeVars.github.contribution.default.borderColor.num5};
+          outline-color: ${themeVars.github.contribution.default.borderColor.num5};
+        }
+      }
+    }
+  }
+`;
+
+// 动态
+export const activity = css`
+  #activity-feed {
+    .flex-item {
+      gap: 12px;
+      padding: 16px 0;
+      &:first-child {
+        padding-top: 6px;
+      }
+      > .flex-item-main {
+        gap: 8px !important;
+      }
+      // 动态的右侧 svg 图标
+      .flex-item-trailing svg {
+        height: 20px;
+        width: 20px;
       }
     }
   }

styles/components/index.ts

@@ -7,8 +7,10 @@ import "./explore";
 import "./filelist";
 import "./heatmap";
 import "./issue";
-import "./signin";
 import "./newrepo";
+import "./org";
 import "./release";
 import "./repo";
 import "./setting";
+import "./signin";
+import "./user";

styles/components/org.ts

@@ -0,0 +1,21 @@
+import { css, themeVars } from "src/types/vars";
+
+export const org = css`
+  .page-content.organization.profile {
+    #org-info {
+      .ui.header {
+        // 组织页面的 RSS 订阅按钮
+        .ui.label.button {
+          padding: 4px 16px;
+          .svg {
+            width: 20px;
+            min-width: 20px;
+          }
+          &:hover {
+            border-color: ${themeVars.color.light.border};
+          }
+        }
+      }
+    }
+  }
+`;

styles/components/signin.ts

@@ -15,7 +15,7 @@ export const signIn = css`
       font-size: 20px;
       font-weight: 600;
       background-color: unset !important;
-      margin-bottom: 0.25rem;
+      padding: 16px;
     }
 
     .ui.attached.segment {

styles/components/user.ts

@@ -0,0 +1,62 @@
+import { css, themeVars } from "src/types/vars";
+
+// 用户点星仓库列表
+export const stars = css`
+  .page-content.user.profile {
+    .stars {
+      > .flex-list {
+        > .flex-item {
+          padding: 24px 0;
+          &:first-child {
+            padding-top: 14px;
+          }
+          // 仓库头像
+          > .flex-item-leading {
+            img,
+            svg {
+              color: ${themeVars.color.text.light.num1};
+            }
+          }
+          // 仓库信息
+          > .flex-item-main {
+            // 仓库标题
+            > .flex-item-header {
+              // 仓库名称
+              > .flex-item-title {
+                font-size: 20px;
+                gap: 8px;
+                // 仓库中间的间隔线
+                &:not(a) {
+                  color: ${themeVars.color.primary.self};
+                }
+              }
+              // 仓库语言, 星标
+              > .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: 10px;
+              // 更新时间
+              &:last-child {
+                font-size: 12px;
+              }
+            }
+            // 主题标签
+            > .label-list {
+              margin-top: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+`;

styles/public/attached.ts

@@ -10,6 +10,7 @@ export const attached = css`
   // 新建页面内容
   .page-content.repository.new-repo,
   .page-content.repository.new.migrate,
+  .page-content.repository.new.fork,
   .page-content.organization.new.org {
     .ui.top.attached.header {
       border: 0;

styles/public/label.ts

@@ -166,12 +166,19 @@ export const taskStatusLabel = css`
 // 仓库标签 (私有/公开/内部)
 export const repoLabel = css`
   span,
+  // 用户切换面板的标签
   .org-visibility div {
     &.ui.basic.label {
       background-color: unset;
       color: ${themeVars.color.text.light.num1};
+      font-size: 12px;
+      font-weight: 500;
+      padding: 3px 6px;
     }
   }
+  .org-visibility span.ui.basic.label {
+    font-size: 14px;
+  }
 `;
 
 // 软件包列表

styles/public/navbar.ts

@@ -77,6 +77,19 @@ export const navbarRight = css`
           left: 22px;
         }
       }
+      // 通知和计时器的圆点
+      a.item {
+        .notification_count,
+        .header-stopwatch-dot {
+          background-color: ${themeVars.github.bgColor.accent.emphasis};
+          border-radius: 25px;
+          color: ${themeVars.color.white};
+          font-size: 8px;
+          font-weight: 600;
+          top: -14px;
+          left: 12px;
+        }
+      }
     }
   }
   // 手机下的创建菜单按钮