同步软件包页面样式

.github/release.md

@@ -30,6 +30,7 @@
 - 同步仓库已标星的星星颜色
 - 优化仪表板动态信息间隔
 - 微调仓库相关界面元素间隔
+- 同步软件包页面样式
 
 ### 🐞 Fix
 

package.json

@@ -1,7 +1,6 @@
 {
   "name": "gitea-github-theme",
   "version": "1.24.6",
-  "description": "A sophisticated theme to make Gitea look and feel like GitHub",
   "type": "module",
   "scripts": {
     "dev": "vite build --mode dev",

styles/components/index.ts

@@ -13,6 +13,7 @@ import "./milestones";
 import "./newrepo";
 import "./notification";
 import "./org";
+import "./packages";
 import "./release";
 import "./repo";
 import "./setting";

styles/components/issue.ts

@@ -522,37 +522,53 @@ const sidebarPadding = {
 
 // 侧边栏
 export const issueSidebar = css`
-  .issue-content {
-    gap: 24px;
-    .issue-content-right {
-      border: 0;
-      font-size: 12px;
-      padding: 0;
-      .ui.button {
+  .repository.view.issue {
+    .issue-content {
+      gap: 24px;
+      .issue-content-right {
+        border: 0;
         font-size: 12px;
-      }
-      .ui.form,
-      a.fixed-text.muted,
-      span.text,
-      // 列表项为空时的文字
-      span.item.empty-list,
-      p {
-        color: ${themeVars.color.text.light.num1};
-        font-size: 12px;
-      }
-      .ui.dropdown.select-branch,
-      .ui.form,
-      a.fixed-text.muted,
-      span.text,
-      .ui.watching > div,
-      .ui.depending > div,
-      .flex-text-block,
-      .ui.list,
-      p {
-        ${sidebarPadding};
-      }
-      .issue-sidebar-combo {
-        .ui.dropdown > a.fixed-text.muted {
+        padding: 0;
+        .ui.button {
+          font-size: 12px;
+        }
+        .ui.form,
+        a.fixed-text.muted,
+        span.text,
+        // 列表项为空时的文字
+        span.item.empty-list,
+        p {
+          color: ${themeVars.color.text.light.num1};
+          font-size: 12px;
+        }
+        .ui.dropdown.select-branch,
+        .ui.form,
+        a.fixed-text.muted,
+        span.text,
+        .ui.watching > div,
+        .ui.depending > div,
+        .flex-text-block,
+        .ui.list,
+        p {
+          ${sidebarPadding};
+        }
+        .issue-sidebar-combo {
+          .ui.dropdown > a.fixed-text.muted {
+            align-items: center;
+            border-radius: ${otherThemeVars.border.radius};
+            text-decoration-line: none;
+            height: 28px;
+            &:hover {
+              background: ${themeVars.github.control.transparent.bgColor.hover};
+            }
+          }
+          .ui.list {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+        }
+        // 时间追踪
+        > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
           align-items: center;
           border-radius: ${otherThemeVars.border.radius};
           text-decoration-line: none;
@@ -561,62 +577,48 @@ export const issueSidebar = css`
             background: ${themeVars.github.control.transparent.bgColor.hover};
           }
         }
-        .ui.list {
-          margin-top: 0 !important;
-          margin-bottom: 0 !important;
+        // 选中日期颜色
+        .ui.form .due-date {
+          color: ${themeVars.color.text.self};
         }
-      }
-      // 时间追踪
-      > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
-        align-items: center;
-        border-radius: ${otherThemeVars.border.radius};
-        text-decoration-line: none;
-        height: 28px;
-        &:hover {
-          background: ${themeVars.github.control.transparent.bgColor.hover};
+        .divider {
+          margin: 12px 0 12px 8px;
+          width: calc(100% - 16px);
         }
-      }
-      // 选中日期颜色
-      .ui.form .due-date {
-        color: ${themeVars.color.text.self};
-      }
-      .divider {
-        margin: 12px 0 12px 8px;
-        width: calc(100% - 16px);
-      }
-      // 订阅按钮
-      .ui.watching .ui.button {
-        padding: 0px 8px;
-        height: 28px;
-        svg {
-          margin: 0 !important;
-        }
-      }
-      // PIN 按钮
-      .form-fetch-action.single-button-form .ui.button,
-      // 底部操作按钮
-      .ui.show-modal.button {
-        border: 0;
-        background: unset;
-        font-weight: 400;
-        ${sidebarPadding};
-        // 好像是浏览器 BUG, 最后不生效, 必须 !important
-        margin: 0 !important;
-        justify-content: left;
-        &:hover {
-          background: ${themeVars.github.control.transparent.bgColor.hover};
-        }
-      }
-      .ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
-        color: ${themeVars.color.red.self};
-        svg {
-          color: ${themeVars.color.red.self};
-        }
-        &:hover {
-          background-color: ${themeVars.color.red.badge.bg};
-          color: ${themeVars.color.red.light};
+        // 订阅按钮
+        .ui.watching .ui.button {
+          padding: 0px 8px;
+          height: 28px;
           svg {
+            margin: 0 !important;
+          }
+        }
+        // PIN 按钮
+        .form-fetch-action.single-button-form .ui.button,
+        // 底部操作按钮
+        .ui.show-modal.button {
+          border: 0;
+          background: unset;
+          font-weight: 400;
+          ${sidebarPadding};
+          // 好像是浏览器 BUG, 最后不生效, 必须 !important
+          margin: 0 !important;
+          justify-content: left;
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+          }
+        }
+        .ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
+          color: ${themeVars.color.red.self};
+          svg {
+            color: ${themeVars.color.red.self};
+          }
+          &:hover {
+            background-color: ${themeVars.color.red.badge.bg};
             color: ${themeVars.color.red.light};
+            svg {
+              color: ${themeVars.color.red.light};
+            }
           }
         }
       }

styles/components/packages.ts

@@ -0,0 +1,105 @@
+import { css, otherThemeVars, themeVars } from "src/types/vars";
+
+// 组织/仓库的软件包列表(包含用户但未测试)
+export const packagesList = css`
+  .page-content.packages {
+    // 这里必须要用 >, 否则会影响到软件包详细信息页的样式
+    > .ui.container > div:not([class]) {
+      border: 1px solid ${themeVars.color.light.border};
+      border-radius: ${otherThemeVars.border.radius};
+      margin-top: 16px;
+      .flex-list {
+        border-top: 1px solid ${themeVars.color.light.border};
+        &:first-child {
+          border-top: 0;
+        }
+        .flex-item {
+          padding: 16px;
+          .flex-item-main {
+            .flex-item-title {
+              gap: 8px;
+              > a {
+                min-height: 25px;
+              }
+              // 软件包类型的标签
+              .ui.label {
+                gap: 4px;
+                padding: 3px 6px;
+                min-height: 24.5px;
+                background-color: unset;
+                border: 1px solid ${themeVars.color.light.border};
+                color: ${themeVars.color.primary.self};
+              }
+            }
+            .flex-item-body {
+              font-size: 12px;
+              a {
+                text-decoration: underline;
+                text-underline-offset: 3px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+// 软件包详细信息页
+export const packagesDetail = css`
+  .page-content.packages {
+    .issue-title-header > div {
+      color: ${themeVars.color.text.light.num1};
+    }
+    .issue-content {
+      .issue-content-left {
+        .ui.top.attached.header {
+          font-size: 14px;
+          padding: 16px;
+        }
+        .ui.attached.segment {
+          color: ${themeVars.color.text.light.num1};
+          padding: 16px;
+          .ui.table,
+          .ui.form .field > label {
+            color: ${themeVars.color.text.light.num1};
+          }
+          .ui.form .field > label {
+            margin-bottom: 8px;
+          }
+          .markup {
+            color: ${themeVars.color.text.self};
+            pre {
+              font-size: 12px;
+              font-weight: 400;
+              padding: 12px 16px;
+            }
+          }
+          + .ui.top.attached.header {
+            margin-top: 24px;
+          }
+        }
+      }
+      .issue-content-right {
+        border: 0;
+        padding: 0px 16px;
+        > strong {
+          font-size: 16px;
+        }
+        > .divider {
+          margin: 16px 0px;
+        }
+        // 详情
+        > .ui.relaxed.list {
+          margin: 16px 0px;
+          .item {
+            color: ${themeVars.color.text.light.num1};
+            svg {
+              color: ${themeVars.color.text.self};
+            }
+          }
+        }
+      }
+    }
+  }
+`;

styles/public/button.ts

@@ -120,4 +120,9 @@ export const fixButton = css`
   .ui.ui.ui.ui.small.button {
     z-index: 0;
   }
+  // 代码复制按钮
+  .ui.button.code-copy {
+    padding: 4px 6px;
+    min-height: 28px;
+  }
 `;

styles/public/label.ts

@@ -186,19 +186,3 @@ export const repoLabel = css`
     font-size: 14px;
   }
 `;
-
-// 软件包列表
-export const packagesLabel = css`
-  .page-content {
-    &.packages {
-      > .ui.container > div > .flex-list {
-        // 软件包类型的标签
-        .ui.label {
-          background-color: unset;
-          border: 1px solid ${themeVars.color.light.border};
-          color: ${themeVars.color.primary.self};
-        }
-      }
-    }
-  }
-`;