feat(i18n): add new localization strings for settings and two-step login across multiple languages

style: adjust grid layout for app main and add responsive styles for settings category

style: enhance management styles with new settings category layout and tabs

style: improve responsive design for settings modules and submodules
This commit is contained in:
shuaiplus committed 2026-07-03 19:19:24 +08:00
1 parent 6284c632de
commit c7eb6c663d
12 files changed
+963 -310

No files matched your search

+99 -8
View File
@@ -770,11 +770,44 @@
}
.settings-modules-grid,
.settings-category-layout,
.domain-rules-grid,
.password-settings-grid {
grid-template-columns: 1fr;
}
.settings-category-tabs {
position: static;
display: flex;
gap: 4px;
overflow-x: auto;
width: 100%;
margin-inline: 0;
padding: 4px;
scrollbar-width: none;
}
.settings-category-tabs::-webkit-scrollbar {
display: none;
}
.settings-category-tab {
flex: 0 0 auto;
min-height: 38px;
padding: 0 12px;
white-space: nowrap;
}
.settings-category-panel {
width: 100%;
min-width: 0;
max-width: none;
}
.settings-category-tab.active {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, var(--line));
}
.import-export-panel .actions .btn,
.settings-subcard .actions .btn,
.section-head .actions .btn {
@@ -961,6 +994,51 @@
}
@media (max-width: 640px) {
.settings-category-layout {
gap: 12px;
}
.settings-category-panel {
padding: 16px;
border-radius: 14px;
}
.settings-page-categorized {
padding: 0;
}
.settings-section-stack {
gap: 0;
}
.settings-submodule {
padding: 14px 0;
border-radius: 0;
}
.settings-submodule.two-step-recovery-warning {
padding: 14px;
}
.two-step-provider-row {
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 10px;
}
.two-step-provider-icon {
width: 42px;
height: 42px;
}
.two-step-provider-row .btn {
grid-column: 3;
justify-self: end;
}
.totp-manage-dialog-body .totp-grid {
grid-template-columns: 1fr;
}
.settings-modules-grid {
gap: 8px;
}
@@ -974,7 +1052,8 @@
padding: 0;
}
.settings-module h3 {
.settings-module h3,
.settings-submodule h3 {
margin-bottom: 8px;
font-size: 15px;
line-height: 1.25;
@@ -1001,11 +1080,13 @@
}
.settings-module .field,
.settings-submodule .field,
.auth-card .field {
margin-bottom: 8px;
}
.settings-module .field > span,
.settings-submodule .field > span,
.auth-card .field > span {
margin-top: 0;
margin-bottom: 4px;
@@ -1014,19 +1095,22 @@
}
.settings-module .field-grid,
.settings-submodule .field-grid,
.auth-card .field-grid,
.session-timeout-fields {
gap: 8px;
}
.settings-module .input {
.settings-module .input,
.settings-submodule .input {
height: 42px;
border-radius: 12px;
padding: 8px 11px;
font-size: 15px;
}
.settings-module select.input {
.settings-module select.input,
.settings-submodule select.input {
padding-top: 0;
padding-bottom: 0;
padding-right: 30px;
@@ -1035,18 +1119,21 @@
calc(100% - 9px) calc(50% - 3px);
}
.settings-module .field-help {
.settings-module .field-help,
.settings-submodule .field-help {
margin-top: 5px;
font-size: 12px;
line-height: 1.35;
}
.settings-module .btn,
.settings-submodule .btn,
.auth-card .btn:not(.full) {
margin-top: 2px;
}
.settings-module .actions {
.settings-module .actions,
.settings-submodule .actions {
gap: 7px;
}
@@ -1065,18 +1152,22 @@
width: 100%;
}
.settings-module .totp-grid {
.settings-module .totp-grid,
.settings-submodule .totp-grid {
gap: 8px;
margin-bottom: 8px;
}
.settings-module .totp-qr {
.settings-module .totp-qr,
.settings-submodule .totp-qr {
min-height: 132px;
padding: 8px;
}
.settings-module .totp-qr svg,
.settings-module .totp-qr img {
.settings-module .totp-qr img,
.settings-submodule .totp-qr svg,
.settings-submodule .totp-qr img {
width: 118px;
height: 118px;
}