Adaptation for version 28.0.0

CHANGELOG.md

@@ -1,4 +1,12 @@
-### 🐞 Fix
+### 🌈 Style
 
-- Fix the border alignment issue of the Actions page event trigger.
-- Fix the high alignment issue of the RSS subscription button on the organization page.
+#### Adaptation for version 28.0.0
+
+- Fix the spacing issue of dropdown menu items.
+- Optimize the width of secondary menu buttons.
+- Fix the rounded corners of the user information panel avatar.
+- Fix the top navigation bar avatar style not taking effect.
+- Fix the issue of missing border lines when the menu pops up upwards.
+- Synchronize repository star/RSS/Work button styles.
+- Synchronize repository name style.
+- Optimize the Actions Job queue list style.

styles/components/actions/actions.ts

@@ -24,13 +24,30 @@ const actions = css`
   /* 避免锚中设置界面里的 Actions */
   .page-content.repository.actions:not(.settings) .flex-container {
     /* Actions 列表 */
-    .flex-container-nav:before {
-      content: "Actions";
-      display: block;
-      font-size: 20px;
-      font-weight: 600;
-      margin-top: 6px;
-      margin-bottom: 8px;
+    .flex-container-nav {
+      &:before {
+        content: "Actions";
+        display: block;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 6px;
+        margin-bottom: 8px;
+      }
+      .ui.menu {
+        &:first-child {
+          margin-bottom: 8px;
+        }
+        &:last-child {
+          border-top: 1px solid ${themeVars.color.light.border};
+          margin-top: 8px;
+          > div:not([class]) {
+            font-size: 12px;
+            font-weight: 600;
+            color: ${themeVars.color.text.light.num1};
+            padding: 6px 8px;
+          }
+        }
+      }
     }
     /* 工作流列表 */
     .flex-container-main {
@@ -120,6 +137,15 @@ const actions = css`
           background: ${themeVars.color.body};
         }
       }
+      /* 工作流队列 */
+      #actions-job-queue {
+        .ui.attached.table.segment {
+          border-bottom-left-radius: ${otherThemeVars.border.radius};
+          border-bottom-right-radius: ${otherThemeVars.border.radius};
+          border: 1px solid ${themeVars.color.light.border};
+          border-top: 0;
+        }
+      }
     }
   }
 `;

styles/components/navbar.ts

@@ -98,7 +98,7 @@ const navbarRight = css`
         /* 头像菜单 */
         &:last-child {
           padding: 0;
-          .text {
+          .flex-text-block {
             /* 不显示头像右侧的小箭头下拉菜单标识 */
             > .not-mobile {
               display: none;

styles/components/repo/repo.ts

@@ -18,6 +18,7 @@
  */
 
 import { css, cssCombine, otherThemeVars, themeVars } from "@lutinglt/gitea-github-theme/core";
+import { activeItemAfterStyle } from "@lutinglt/gitea-github-theme/styles/common";
 
 // 仓库头信息
 const repoHeader = css`
@@ -26,30 +27,69 @@ const repoHeader = css`
     .ui.compact.button {
       padding: 3px 8px;
       gap: 4px;
+      &.dropdown {
+        padding-right: 22px;
+      }
     }
     > .flex-text-block:first-child {
       /* 仓库名称 */
       > .flex-text-block:first-of-type {
+        gap: 0;
         /* 间隔线颜色 */
         color: ${themeVars.color.text.light.num1};
+        font-size: 14px !important;
         /* 仓库名称 */
-        a {
+        > a {
           display: flex;
           align-items: center;
           color: ${themeVars.color.text.self};
-          font-size: 18px;
+          font-size: 18px !important;
           text-decoration: none !important;
-          min-width: 3ch;
-          padding: 0px 6px;
+          height: 32px;
+          padding: 4px;
           border-radius: ${otherThemeVars.border.radius};
-          margin-top: 8px;
-          margin-bottom: 8px;
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
           }
           &.muted:not(.tw-font-normal) {
             font-weight: 600;
           }
+          &:first-of-type {
+            margin-right: 4px;
+          }
+          &:last-of-type {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            margin-left: 4px;
+            &:hover + .ui.custom.dropdown {
+              background: ${themeVars.github.control.transparent.bgColor.hover};
+            }
+          }
+        }
+        /* 仓库名称下拉菜单 */
+        > .ui.custom.dropdown {
+          border-top-right-radius: ${otherThemeVars.border.radius};
+          border-bottom-right-radius: ${otherThemeVars.border.radius};
+          padding: 4px;
+          height: 32px;
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+          }
+          .menu {
+            > .item {
+              /* 选中图标 */
+              .octicon-check {
+                margin-top: 0;
+              }
+              /* 居中 */
+              > span {
+                display: inline-flex;
+              }
+              &:hover:after {
+                ${activeItemAfterStyle}
+              }
+            }
+          }
         }
       }
     }

styles/components/repo/repo_sidebar.ts

@@ -72,6 +72,7 @@ const repoSidebarTop = css`
         color: ${themeVars.color.text.light.num1};
         font-size: 14px;
         font-weight: 600;
+        gap: 4px;
         margin-top: 10px;
         &.muted {
           margin-top: 2px;
@@ -105,7 +106,7 @@ const repoSidebarBottom = css`
         margin: 8px 0;
       }
       /* 版本 */
-      .repo-home-sidebar-header + .flex-relaxed-list {
+      .repo-home-sidebar-header + div {
         gap: 0px;
         margin-bottom: 8px;
         .flex-text-block {

styles/components/user.ts

@@ -84,10 +84,8 @@ const stars = css`
 const profileCard = css`
   .page-content.user.profile {
     #profile-avatar-card {
-      #profile-avatar {
-        img.ui.avatar {
-          border-radius: 9999px;
-        }
+      .ui.avatar.profile-avatar-image {
+        border-radius: 9999px;
       }
     }
   }

styles/public/dropdown/dropdown.ts

@@ -29,7 +29,8 @@ const dropdown = css`
       background-color: ${themeVars.color.menu};
       border: none !important;
       border-radius: 12px !important;
-      box-shadow: ${themeVars.github.shadow.floating.small};
+      /* 菜单统一阴影, 避免 Gitea 样式覆盖导致边框线丢失 */
+      box-shadow: ${themeVars.github.shadow.floating.small} !important;
       /* 修复 lightingcss 导致的优先级问题 */
       &.scrolling {
         box-shadow: none !important;
@@ -165,10 +166,12 @@ const dropdown = css`
   .ui.dropdown .menu .menu {
     border-radius: 12px !important;
   }
-  /* 修复按钮阴影被覆盖缺少边框线的问题 */
-  /* 仓库动态页面的右侧按钮, 比如时间周期 */
-  .ui.floating.dropdown .menu {
-    box-shadow: ${themeVars.github.shadow.floating.small} !important;
+  /* 修复下拉菜单的边距问题 */
+  .ui.ui.dropdown .menu {
+    padding: 0;
+    > .item {
+      width: auto;
+    }
   }
 `;
 

styles/public/label/label.ts

@@ -34,6 +34,10 @@ const label = css`
       border-radius: 9999px;
       ${labelStyle}
       line-height: 18px;
+      &.small {
+        line-height: 1;
+        padding: 2px 6px;
+      }
       &.mini {
         line-height: 16px;
       }

styles/public/menu/secondary_menu.ts

@@ -99,4 +99,13 @@ const secondarySmallFilterMenu = css`
   }
 `;
 
-export default cssCombine(secondaryMenu, secondarySmallFilterMenu);
+// 修复 Gitea 28.0.0 引入的多余右边距
+const fixSecondaryFilterMenu = css`
+  .ui.ui.secondary.filter.menu {
+    .item > .svg {
+      margin-right: 0;
+    }
+  }
+`;
+
+export default cssCombine(secondaryMenu, secondarySmallFilterMenu, fixSecondaryFilterMenu);

styles/public/tippy.ts

@@ -49,11 +49,10 @@ const tippyBox = css`
     /* 差异对比中文件路径行右侧的三个点菜单 */
     &[data-theme="menu"] {
       .tippy-content {
-        padding: 8px;
+        padding: 8px 4px;
         .item {
           border-radius: ${otherThemeVars.border.radius};
           padding: 6px 8px;
-          height: 32px;
           &:hover {
             background-color: ${themeVars.github.control.transparent.bgColor.hover};
             box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};