优化热力图和动态样式

.github/release.md

@@ -7,6 +7,7 @@
 - 同步仓库代码文件页 README 导航栏样式
 - 同步分页菜单样式
 - 同步登录/注册页面样式
+- 优化热力图和动态样式
 
 ## 🎈 Perf
 

TODO.md

@@ -2,7 +2,6 @@
 
 - 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/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 {
-    // 覆盖热力图和图例的背景色
-    .vch__day__square,
-    .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;
+  #user-heatmap {
+    .total-contributions {
+      left: 25px + 20px;
+      bottom: 0 + 12px;
+    }
+    .total-contributions,
+    .vch__legend-right {
+      color: ${themeVars.color.text.light.num1};
+    }
+    .vch__container {
+      padding: 12px 20px;
+      border: 1px solid ${themeVars.color.secondary.self};
+      border-radius: ${otherThemeVars.border.radius};
+      // 覆盖热力图和图例的背景色
+      .vch__day__square,
+      .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);"] {
-        fill: ${themeVars.github.contribution.default.bgColor.num0} !important;
-      }
+        &[style="fill: var(--color-secondary-alpha-60);"] {
+          fill: ${themeVars.github.contribution.default.bgColor.num0} !important;
+        }
 
-      &[style="fill: var(--color-primary-light-4);"] {
-        fill: ${themeVars.github.contribution.default.bgColor.num1} !important;
-        outline-color: ${themeVars.github.contribution.default.borderColor.num1};
-      }
+        &[style="fill: var(--color-primary-light-4);"] {
+          fill: ${themeVars.github.contribution.default.bgColor.num1} !important;
+          outline-color: ${themeVars.github.contribution.default.borderColor.num1};
+        }
 
-      &[style="fill: var(--color-primary-light-2);"] {
-        fill: ${themeVars.github.contribution.default.bgColor.num2} !important;
-        outline-color: ${themeVars.github.contribution.default.borderColor.num2};
-      }
+        &[style="fill: var(--color-primary-light-2);"] {
+          fill: ${themeVars.github.contribution.default.bgColor.num2} !important;
+          outline-color: ${themeVars.github.contribution.default.borderColor.num2};
+        }
 
-      &[style="fill: var(--color-primary);"] {
-        fill: ${themeVars.github.contribution.default.bgColor.num3} !important;
-        outline-color: ${themeVars.github.contribution.default.borderColor.num3};
-      }
+        &[style="fill: var(--color-primary);"] {
+          fill: ${themeVars.github.contribution.default.bgColor.num3} !important;
+          outline-color: ${themeVars.github.contribution.default.borderColor.num3};
+        }
 
-      &[style="fill: var(--color-primary-dark-2);"] {
-        fill: ${themeVars.github.contribution.default.bgColor.num4} !important;
-        outline-color: ${themeVars.github.contribution.default.borderColor.num4};
-      }
+        &[style="fill: var(--color-primary-dark-2);"] {
+          fill: ${themeVars.github.contribution.default.bgColor.num4} !important;
+          outline-color: ${themeVars.github.contribution.default.borderColor.num4};
+        }
 
-      &[style="fill: var(--color-primary-dark-4);"] {
-        fill: ${themeVars.github.contribution.default.bgColor.num5} !important;
-        outline-color: ${themeVars.github.contribution.default.borderColor.num5};
+        &[style="fill: var(--color-primary-dark-4);"] {
+          fill: ${themeVars.github.contribution.default.bgColor.num5} !important;
+          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;
       }
     }
   }