Buriburizaemon/nodewarden
1
0
Fork 0
mirror of https://github.com/shuaiplus/nodewarden.git synced 2026-06-20 13:00:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: enhance register page styling with grid background and button effects

Browse Source
This commit is contained in:
shuaiplus
2026-02-19 21:13:59 +08:00
parent 9771df8777
commit 870149c771
1 changed files with 51 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/setup/pageTemplate.ts
+51 -6
View File
@@ -15,7 +15,8 @@ export function renderRegisterPageHTML(jwtState: JwtSecretState | null): string
<style> <style>
:root { :root {
color-scheme: light; color-scheme: light;
--bg: #f3f4f6; --grid-line: rgba(170, 170, 170, 0.34);
--grid-size: 30px;
--card: #ffffff; --card: #ffffff;
--border: #d0d5dd; --border: #d0d5dd;
--text: #101828; --text: #101828;
@@ -33,7 +34,12 @@ export function renderRegisterPageHTML(jwtState: JwtSecretState | null): string
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--bg); background-color: var(--bg);
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
background-position: -1px -1px;
color: var(--text); color: var(--text);
display: flex; display: flex;
align-items: center; align-items: center;
@@ -48,7 +54,7 @@ export function renderRegisterPageHTML(jwtState: JwtSecretState | null): string
border: 1px solid var(--border); border: 1px solid var(--border);
background: var(--card); background: var(--card);
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: var(--shadow); box-shadow: 0px 0px 20px 10px rgba(16, 24, 40, 0.08);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@@ -242,9 +248,9 @@ export function renderRegisterPageHTML(jwtState: JwtSecretState | null): string
height: 46px; height: 46px;
padding: 0 16px; padding: 0 16px;
border-radius: 14px; border-radius: 14px;
border: 1px solid #d5dae1; border: 1px solid #c6ccd5;
background: #ffffff; background: #f6f7f9;
color: #111418; color: #1d2939;
font-weight: 700; font-weight: 700;
font-size: 15px; font-size: 15px;
display: inline-flex; display: inline-flex;
@@ -253,13 +259,39 @@ export function renderRegisterPageHTML(jwtState: JwtSecretState | null): string
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.btn:hover {
background: #edf0f4;
border-color: #b8c0cc;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(16, 24, 40, 0.08);
}
.btn:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
} }
.btn.primary { .btn.primary {
border-color: #111418; border-color: #111418;
background: #111418; background: #111418;
color: #ffffff; color: #ffffff;
} }
.btn.primary:hover {
background: #1f242b;
border-color: #1f242b;
box-shadow: 0 10px 22px rgba(16, 24, 40, 0.22);
}
.btn.primary:active {
background: #151a20;
border-color: #151a20;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:disabled:hover {
transform: none;
box-shadow: none;
background: inherit;
border-color: inherit;
}
.mode-tabs { display: inline-flex; border: 1px solid #d5dae1; border-radius: 12px; overflow: hidden; } .mode-tabs { display: inline-flex; border: 1px solid #d5dae1; border-radius: 12px; overflow: hidden; }
.mode-tab { .mode-tab {
@@ -299,6 +331,19 @@ export function renderRegisterPageHTML(jwtState: JwtSecretState | null): string
.flow-actions { display: flex; align-items: center; gap: 8px; width: 132px; } .flow-actions { display: flex; align-items: center; gap: 8px; width: 132px; }
.flow-actions .btn { width: 120px; padding: 0; } .flow-actions .btn { width: 120px; padding: 0; }
@media (max-width: 560px) {
.flow-bottom {
padding: 0;
gap: 10px;
}
.flow-actions {
width: calc(50% - 10px);
}
.flow-actions .btn {
width: 100%;
}
}
.dots { .dots {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;