kate522/wordpress-theme-aksrt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(profile): align account modal UI

Browse Source
This commit is contained in:
kate522 committed 2026-10-06 01:46:48 +08:00
1 parent 248912f610
commit ce429e1caf
3 files changed
+57 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/routes/user-center/settings.css
+37 -8
View File
@@ -613,9 +613,23 @@
max-height: calc(100dvh - 20px);
overflow: auto;
border-radius: var(--main-radius, 8px);
box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.aksrt-modal-runtime.aksrt-user-settings-modal.aksrt-modal-runtime--bottom .aksrt-modal-runtime__dialog {
width: 400px;
max-width: calc(100vw - 20px);
max-height: calc(100dvh - 20px - env(safe-area-inset-bottom));
margin: 0 auto calc(10px + env(safe-area-inset-bottom));
border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
box-shadow: 0 -10px 50px rgba(0, 0, 0, .15);
}
.aksrt-user-settings-modal .aksrt-modal-runtime__content { padding: 0; }
.aksrt-modal-runtime--bottom.aksrt-user-settings-modal .aksrt-settings-modal {
padding-bottom: env(safe-area-inset-bottom);
border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
}
.aksrt-settings-modal {
position: relative;
@@ -637,11 +651,19 @@
}
.aksrt-settings-modal .modal-colorful-header > .close {
position: absolute;
top: 10px;
right: 10px;
z-index: 9;
width: 30px;
height: 30px;
padding: 0;
border: 0;
background: transparent;
color: var(--this-color);
font-size: 18px;
line-height: 30px;
opacity: .6;
cursor: pointer;
}
@@ -649,14 +671,14 @@
position: relative;
z-index: 0;
margin-top: 120px;
padding: 18px 15px;
padding: 15px;
}
.aksrt-settings-modal__pane {
position: relative;
z-index: 0;
margin-top: 120px;
padding: 18px 15px;
padding: 15px;
}
.aksrt-settings-modal__pane form,
@@ -669,27 +691,34 @@
position: relative;
z-index: 0;
margin-top: 120px;
padding: 18px 15px 0;
padding: 10px;
}
.aksrt-settings-modal .account-step-panels { position: relative; z-index: 0; }
.aksrt-settings-modal .account-step { display: none; padding: 0 15px 18px; }
.aksrt-settings-modal .account-step.is-active { display: block; }
.aksrt-settings-modal .account-step > p { margin: 0 0 12px; }
.aksrt-settings-modal .account-step > p { margin: 0 0 20px; }
.aksrt-settings-modal .account-recovery-toggle { border: 0; background: transparent; cursor: pointer; }
.aksrt-settings-modal__fields { padding: 0 2px; }
.aksrt-settings-modal__fields { padding: 0; }
.aksrt-settings-modal .modal-line-field--code .line-form-input { padding-right: 7em; }
.aksrt-settings-modal .toggle-pwd { position: absolute; right: 7px; bottom: 4px; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--muted-2-color, #999); cursor: pointer; }
.aksrt-settings-modal .toggle-pwd:hover { color: var(--color-ink, #333); }
.aksrt-settings-modal .code-send-btn { min-width: 112px; padding: 6px 10px; white-space: nowrap; }
.aksrt-settings-modal .code-send-btn { white-space: nowrap; }
.aksrt-settings-modal .code-send-btn.is-counting { pointer-events: none; opacity: .6; }
.aksrt-settings-modal .aksrt-captcha-wrap { margin: 12px 0 8px; }
@media (max-width: 768px) {
@media (max-width: 640px) {
.aksrt-modal-runtime.aksrt-user-settings-modal.aksrt-modal-runtime--bottom .aksrt-modal-runtime__dialog {
width: 100%;
max-width: 100%;
max-height: calc(100dvh - env(safe-area-inset-bottom));
margin: 0 0 -1px;
border-radius: 16px 16px 0 0;
}
.aksrt-modal-runtime--bottom.aksrt-user-settings-modal .aksrt-settings-modal {
border-radius: 16px 16px 0 0;
}
.aksrt-settings-modal .code-send-btn { min-width: 104px; }
}
assets/js/routes/user-center.js
+1 -3
View File
@@ -721,7 +721,7 @@
runtime.open({
html: template.innerHTML,
kind: 'account-settings',
className: 'aksrt-user-settings-modal modal-mini',
className: 'aksrt-user-settings-modal modal-mini full-sm',
mobileBottom: true,
onContent: function (_, session) {
var shell = session && session.shell;
@@ -729,8 +729,6 @@
var dialog = shell.querySelector('[data-account-dialog]');
var title = dialog && dialog.querySelector('[data-account-password-title], .modal-colorful-header .text-center > div:last-child');
if (title && title.textContent.trim()) shell.setAttribute('aria-label', title.textContent.trim());
var firstInput = shell.querySelector('input:not([type="hidden"]), textarea, select');
if (firstInput) firstInput.focus();
bindDialog(shell);
},
});