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

feat: update backup recommendations UI; enhance styles and structure for better user experience

Browse Source
This commit is contained in:
shuaiplus
2026-05-10 01:54:12 +08:00
parent 4e62c90700
commit 2f1b61e883
10 changed files with 504 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/styles/management.css
+58 -22
View File
@@ -34,6 +34,50 @@
@apply grid gap-2.5;
}
.backup-recommendations-disclosure {
@apply mt-3;
}
.backup-recommendations-summary {
@apply flex cursor-pointer list-none items-center justify-between gap-3 rounded-xl border px-3 py-2.5;
border-color: var(--line);
background: #f8fafc;
color: #0f172a;
}
.backup-recommendations-summary::-webkit-details-marker {
display: none;
}
.backup-recommendations-summary > span:first-child {
@apply grid min-w-0 gap-0.5;
}
.backup-recommendations-summary strong {
@apply text-sm;
}
.backup-recommendations-summary small {
@apply text-xs font-semibold;
color: #64748b;
}
.backup-recommendations-summary-icon {
@apply h-2.5 w-2.5 shrink-0;
border-right: 2px solid #365fa8;
border-bottom: 2px solid #365fa8;
transform: rotate(45deg) translateY(-2px);
transition: transform var(--dur-fast) var(--ease-out-soft);
}
.backup-recommendations-disclosure[open] .backup-recommendations-summary-icon {
transform: rotate(225deg) translate(-1px, -1px);
}
.backup-recommendations-body {
@apply pt-2.5;
}
.backup-option-field {
@apply inline-flex items-center gap-2;
}
@@ -576,7 +620,7 @@
.website-row {
@apply mb-2 grid items-center gap-2 rounded-[18px] border p-1.5;
grid-template-columns: auto minmax(0, 1fr) minmax(130px, 160px) auto;
grid-template-columns: auto minmax(0, 1fr) minmax(96px, 120px) auto;
border-color: transparent;
background: color-mix(in srgb, var(--panel) 84%, transparent);
transition:
@@ -605,7 +649,7 @@
}
.website-match-select {
@apply h-12 py-2.5 pr-[38px] text-[13px] leading-[1.2];
@apply h-12 py-2.5 pr-[30px] text-[13px] leading-[1.2];
}
.website-match-select option {
@@ -618,30 +662,22 @@
@media (max-width: 760px) {
.website-row {
grid-template-columns: auto minmax(0, 1fr) auto;
@apply items-start;
grid-template-columns: auto minmax(88px, 1fr) minmax(72px, 84px) auto;
@apply items-center;
}
.website-row > :nth-child(1) {
grid-column: 1;
grid-row: 1;
align-self: center;
.website-row .website-remove-btn {
width: 30px;
min-width: 30px;
height: 30px;
padding: 0;
gap: 0;
border-radius: 999px;
font-size: 0;
}
.website-row > :nth-child(2) {
grid-column: 2 / span 2;
grid-row: 1;
}
.website-row > :nth-child(3) {
grid-column: 1 / span 2;
grid-row: 2;
}
.website-row > :nth-child(4) {
grid-column: 3;
grid-row: 2;
justify-self: start;
.website-row .website-remove-btn .btn-icon {
margin: 0;
}
}