mirror of
https://github.com/shuaiplus/nodewarden.git
synced 2026-08-05 14:50:11 +00:00
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
@@ -537,6 +537,233 @@
|
||||
@apply mb-2;
|
||||
}
|
||||
|
||||
.settings-page-categorized {
|
||||
@apply min-w-0;
|
||||
}
|
||||
|
||||
.settings-category-layout {
|
||||
@apply grid min-w-0 gap-5;
|
||||
}
|
||||
|
||||
.settings-category-tabs {
|
||||
@apply flex min-w-0 items-center gap-1 border;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
padding: 8px;
|
||||
border-radius: 14px;
|
||||
border-color: var(--line);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.settings-category-tab {
|
||||
@apply relative flex h-9 cursor-pointer items-center rounded-lg border-0 px-3 text-sm font-bold;
|
||||
background: transparent;
|
||||
color: var(--muted-strong);
|
||||
transition:
|
||||
background var(--dur-fast) var(--ease-smooth),
|
||||
color var(--dur-fast) var(--ease-smooth),
|
||||
box-shadow var(--dur-fast) var(--ease-smooth);
|
||||
}
|
||||
|
||||
.settings-category-tab:hover {
|
||||
color: var(--primary-strong);
|
||||
background: color-mix(in srgb, var(--primary) 6%, transparent);
|
||||
}
|
||||
|
||||
.settings-category-tab.active {
|
||||
color: var(--primary-strong);
|
||||
background: color-mix(in srgb, var(--primary) 12%, var(--panel));
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, var(--line));
|
||||
}
|
||||
|
||||
.settings-category-tab.active::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.settings-category-panel {
|
||||
@apply min-w-0;
|
||||
width: 50%;
|
||||
min-width: 700px;
|
||||
max-width: 50%;
|
||||
padding: 24px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.settings-section-stack {
|
||||
@apply grid min-w-0 gap-0;
|
||||
}
|
||||
|
||||
.settings-submodule {
|
||||
@apply min-w-0 border-0 border-b px-0 py-5;
|
||||
border-color: var(--line);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.settings-submodule:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.settings-submodule:last-child {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.settings-submodule h3 {
|
||||
@apply mb-4 mt-0 text-base font-extrabold;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.settings-placeholder-module {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.settings-vertical-fields {
|
||||
@apply grid gap-3;
|
||||
}
|
||||
|
||||
.settings-vertical-fields .field {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.settings-vertical-fields + .btn {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.settings-category-panel > .settings-section-stack > .settings-submodule:only-child {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.two-step-recovery-warning {
|
||||
@apply rounded-xl border p-4;
|
||||
border-color: color-mix(in srgb, #f97316 28%, var(--line));
|
||||
background: color-mix(in srgb, #f97316 7%, var(--panel));
|
||||
}
|
||||
|
||||
.settings-submodule.two-step-recovery-warning {
|
||||
border-bottom-color: color-mix(in srgb, #f97316 28%, var(--line));
|
||||
}
|
||||
|
||||
.two-step-recovery-warning + .two-step-providers-module {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.two-step-warning-head {
|
||||
@apply mb-2 flex items-center gap-2 text-sm font-extrabold;
|
||||
color: #c2410c;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.two-step-recovery-warning p {
|
||||
@apply mb-3 mt-0 text-sm leading-6;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.two-step-recovery-code-dialog-value {
|
||||
@apply my-5 text-center text-base font-extrabold tracking-[0.12em];
|
||||
color: #c2187a;
|
||||
word-spacing: 0.55em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.two-step-provider-list {
|
||||
@apply grid;
|
||||
}
|
||||
|
||||
.two-step-provider-row {
|
||||
@apply grid min-w-0 items-center gap-4 border-b py-5;
|
||||
grid-template-columns: 76px minmax(0, 1fr) auto;
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
.two-step-provider-row:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.two-step-provider-row:last-child {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.two-step-provider-icon {
|
||||
@apply flex h-14 w-14 items-center justify-center rounded-xl;
|
||||
color: var(--primary-strong);
|
||||
background: color-mix(in srgb, var(--primary) 9%, var(--panel));
|
||||
}
|
||||
|
||||
.two-step-provider-yubico {
|
||||
@apply text-base font-extrabold lowercase;
|
||||
color: #54a51c;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.two-step-provider-copy {
|
||||
@apply grid min-w-0 gap-1;
|
||||
}
|
||||
|
||||
.two-step-provider-title {
|
||||
@apply flex min-w-0 flex-wrap items-center gap-2;
|
||||
}
|
||||
|
||||
.two-step-provider-title strong {
|
||||
@apply text-base font-bold;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.two-step-provider-copy span {
|
||||
@apply text-sm leading-5;
|
||||
color: var(--muted-strong);
|
||||
}
|
||||
|
||||
.two-step-enabled-badge {
|
||||
@apply inline-flex min-h-6 items-center rounded-md border px-2 text-xs font-extrabold leading-none;
|
||||
border-color: color-mix(in srgb, var(--success) 28%, var(--line));
|
||||
background: color-mix(in srgb, var(--success) 10%, var(--panel));
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.totp-manage-dialog-body {
|
||||
@apply mt-3;
|
||||
}
|
||||
|
||||
.totp-manage-dialog-body .totp-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.totp-manage-dialog-body .totp-qr {
|
||||
justify-self: center;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.totp-manage-dialog-body .totp-secret-input-wrap {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.totp-manage-dialog-body .totp-secret-input {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dialog-close-btn {
|
||||
@apply absolute right-3 top-3 flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border-0 p-0;
|
||||
background: transparent;
|
||||
color: var(--muted-strong);
|
||||
transition:
|
||||
background-color var(--dur-fast) var(--ease-smooth),
|
||||
color var(--dur-fast) var(--ease-smooth);
|
||||
}
|
||||
|
||||
.dialog-close-btn:hover:not(:disabled) {
|
||||
background: var(--panel-soft);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.dialog-close-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.settings-modules-grid {
|
||||
--settings-grid-gap: 12px;
|
||||
@apply grid;
|
||||
@@ -1196,6 +1423,19 @@
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.settings-category-panel .sensitive-action {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.settings-category-panel > .settings-section-stack > .settings-submodule:only-child.sensitive-action {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.sensitive-action h4 {
|
||||
@apply mb-1 mt-0 text-base font-extrabold;
|
||||
color: var(--text);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user