同步登录/注册页面样式

.github/release.md

@@ -6,13 +6,16 @@
 
 - 同步仓库代码文件页 README 导航栏样式
 - 同步分页菜单样式
+- 同步登录/注册页面样式
 
 ## 🎈 Perf
 
 - 略微增加仓库代码文件列表的单行高度与 GitHub 一致
+- 优化创建仓库/迁移仓库/创建组织页面的样式与设置页面的样式一致
 
 ## 🐞 Fix
 
 - 修复 Action 作业步骤页面标题选中时滚动固定的高度问题
 - 修复用户公开活动页动态布局问题
 - 修复顶部导航栏工单管理/请求合并页面搜索框旁的选择下拉框按钮内容过窄
+- 修复手机页面下注册/登录页导航栏注册按钮换行的问题

TODO.md

@@ -6,5 +6,3 @@
 - 色盲主题支持
 - 打开文件时的文件导航树样式和滚动高度
 - 私有库标签大小, 组织页面下的RSS订阅按钮样式
-- 登录/注册页面样式
-- 创建仓库页面样式 ? (待验证)

styles/components/index.ts

@@ -7,6 +7,7 @@ import "./explore";
 import "./filelist";
 import "./heatmap";
 import "./issue";
+import "./signin";
 import "./newrepo";
 import "./release";
 import "./repo";

styles/components/setting.ts

@@ -76,33 +76,3 @@ export const label = css`
     }
   }
 `;
-
-// 设置右面板的内容
-export const content = css`
-  .user-main-content,
-  .repo-setting-content,
-  .user-setting-content,
-  .org-setting-content,
-  .admin-setting-content {
-    .ui.top.attached.header {
-      border: 0;
-      font-size: 1.5rem;
-      font-weight: 400;
-      background-color: unset !important;
-      margin-bottom: 0.25rem;
-    }
-
-    .ui.attached.segment {
-      background-color: unset;
-      border-radius: 0.5rem !important;
-    }
-
-    .ui.attached.segment:not(.error) {
-      border: 1px solid ${themeVars.color.light.border} !important;
-    }
-
-    .ui.attached.segment.error {
-      border: 1px solid ${themeVars.color.error.border} !important;
-    }
-  }
-`;

styles/components/signin.ts

@@ -0,0 +1,49 @@
+import { css } from "src/types/vars";
+
+// 注册/登录界面
+export const signIn = css`
+  .page-content.user.signin {
+    .ui.grid > .column {
+      width: 384px;
+      padding: 16px;
+      > .ui.container {
+        max-width: unset;
+      }
+    }
+    .ui.top.attached.header {
+      border: 0;
+      font-size: 20px;
+      font-weight: 600;
+      background-color: unset !important;
+      margin-bottom: 0.25rem;
+    }
+
+    .ui.attached.segment {
+      border: 0;
+      padding: 16px 0 0 0;
+      .field:not(.inline) {
+        label {
+          font-size: 14px;
+          font-weight: 600;
+        }
+        input {
+          background: unset;
+          padding: 5px 12px;
+          height: 40px;
+          font-size: 16px;
+        }
+      }
+      .button {
+        height: 40px;
+      }
+    }
+    .ui.top.attached.header.segment {
+      font-size: 14px;
+      font-weight: 400;
+      gap: 16px;
+      .signin-passkey {
+        font-weight: 500;
+      }
+    }
+  }
+`;

styles/public/attached.ts

@@ -0,0 +1,35 @@
+import { css, themeVars, otherThemeVars } from "src/types/vars";
+
+export const attached = css`
+  // 设置右面板的内容
+  .user-main-content,
+  .repo-setting-content,
+  .user-setting-content,
+  .org-setting-content,
+  .admin-setting-content,
+  // 新建页面内容
+  .page-content.repository.new-repo,
+  .page-content.repository.new.migrate,
+  .page-content.organization.new.org {
+    .ui.top.attached.header {
+      border: 0;
+      font-size: 20px;
+      font-weight: 400;
+      background-color: unset !important;
+      margin-bottom: 0.25rem;
+    }
+
+    .ui.attached.segment {
+      background-color: unset;
+      border-radius: ${otherThemeVars.border.radius} !important;
+    }
+
+    .ui.attached.segment:not(.error) {
+      border: 1px solid ${themeVars.color.light.border} !important;
+    }
+
+    .ui.attached.segment.error {
+      border: 1px solid ${themeVars.color.error.border} !important;
+    }
+  }
+`;

styles/public/index.ts

@@ -13,3 +13,4 @@ import "./menu"; // 菜单
 import "./modal"; // 弹窗
 import "./tippy"; // 提示框
 import "./navbar"; // 导航栏
+import "./attached"; // 附加样式

styles/public/menu.ts

@@ -197,6 +197,7 @@ export const secondaryMenu = css`
 // 分页菜单
 export const paginationMenu = css`
   .ui.borderless.pagination.menu {
+    align-items: center;
     background-color: unset;
     border: 0;
     gap: 4px;

styles/public/navbar.ts

@@ -81,10 +81,10 @@ export const navbarRight = css`
   }
   // 手机下的创建菜单按钮
   @media (max-width: 767.98px) {
-    #navbar .navbar-right > .item:not(:last-child) {
+    #navbar .navbar-right:has(.user-menu) > .item:not(:last-child) {
       display: none;
     }
-    #navbar.navbar-menu-open .navbar-right > .item:not(:last-child) {
+    #navbar.navbar-menu-open .navbar-right:has(.user-menu) > .item:not(:last-child) {
       display: grid;
     }
   }