mirror of
https://github.com/shuaiplus/nodewarden.git
synced 2026-06-20 13:00:39 +00:00
feat: enhance admin invites UI and improve styling for better usability
This commit is contained in:
shuaiplus
@@ -129,15 +129,20 @@ export default function AdminPage(props: AdminPageProps) {
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<div className="section-head">
|
||||
<section className="card admin-invites-card">
|
||||
<div className="section-head admin-invites-head">
|
||||
<h3>{t('txt_invites')}</h3>
|
||||
<button type="button" className="btn btn-secondary" disabled={props.loading} onClick={props.onRefresh}>
|
||||
<RefreshCw size={14} className="btn-icon" /> {t('txt_sync')}
|
||||
</button>
|
||||
<div className="actions admin-invites-head-actions">
|
||||
<button type="button" className="btn btn-secondary small" disabled={props.loading} onClick={props.onRefresh}>
|
||||
<RefreshCw size={14} className="btn-icon" /> {t('txt_sync')}
|
||||
</button>
|
||||
<button type="button" className="btn btn-danger small" onClick={() => void props.onDeleteAllInvites()}>
|
||||
<Trash2 size={14} className="btn-icon" /> {t('txt_delete_all')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="invite-toolbar">
|
||||
<div className="actions invite-create-group">
|
||||
<div className="invite-create-group">
|
||||
<label className="field invite-hours-field">
|
||||
<span>{t('txt_invite_validity_hours')}</span>
|
||||
<input
|
||||
@@ -154,11 +159,8 @@ export default function AdminPage(props: AdminPageProps) {
|
||||
{t('txt_create_timed_invite')}
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" className="btn btn-danger" onClick={() => void props.onDeleteAllInvites()}>
|
||||
<Trash2 size={14} className="btn-icon" /> {t('txt_delete_all')}
|
||||
</button>
|
||||
</div>
|
||||
<table className="table">
|
||||
<table className="table invite-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t('txt_code')}</th>
|
||||
@@ -207,7 +209,7 @@ export default function AdminPage(props: AdminPageProps) {
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="actions admin-pagination">
|
||||
<div className="actions admin-pagination invite-pagination">
|
||||
<button type="button" className="btn btn-secondary small" disabled={safePage <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>
|
||||
<ChevronLeft size={14} className="btn-icon" />
|
||||
{t('txt_prev')}
|
||||
|
||||
@@ -240,3 +240,990 @@
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Product refinement layer: calm, dense, app-like surfaces for the vault workflow. */
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
background:
|
||||
linear-gradient(180deg, color-mix(in srgb, var(--panel-soft) 78%, var(--bg-accent)) 0%, var(--bg-accent) 100%);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.app-page {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
border-radius: var(--radius-xl);
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: 56px;
|
||||
padding-inline: 16px;
|
||||
background: color-mix(in srgb, var(--panel) 92%, transparent);
|
||||
border-color: var(--line-soft);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.brand {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
height: 36px;
|
||||
width: 45px;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.brand-wordmark,
|
||||
.standalone-brand-wordmark,
|
||||
.not-found-wordmark {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.user-chip {
|
||||
height: 32px;
|
||||
max-width: 280px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--panel-soft);
|
||||
color: var(--muted-strong);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.user-chip span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
grid-template-columns: 212px minmax(0, 1fr);
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.app-side {
|
||||
padding: 12px;
|
||||
background: var(--panel);
|
||||
border-color: var(--line-soft);
|
||||
}
|
||||
|
||||
.side-nav-main {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.side-link,
|
||||
.side-group-trigger,
|
||||
.side-sub-link,
|
||||
.nav-layout-trigger,
|
||||
.nav-layout-option {
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.side-link,
|
||||
.side-group-trigger {
|
||||
min-height: 40px;
|
||||
padding: 9px 10px;
|
||||
color: var(--muted-strong);
|
||||
}
|
||||
|
||||
.side-subnav-inner {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.side-sub-link {
|
||||
min-height: 36px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.side-link:hover,
|
||||
.side-group-trigger:hover,
|
||||
.side-sub-link:hover,
|
||||
.nav-layout-trigger:hover,
|
||||
.nav-layout-trigger.active {
|
||||
background: var(--panel-soft);
|
||||
border-color: var(--line);
|
||||
color: var(--text);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.side-link.active,
|
||||
.side-group-trigger.active,
|
||||
.side-sub-link.active,
|
||||
.mobile-tab.active,
|
||||
.tree-btn.active,
|
||||
.list-item.active,
|
||||
.sort-menu-item.active,
|
||||
.backup-destination-item.active,
|
||||
.backup-interval-preset.active,
|
||||
.mobile-settings-link.active,
|
||||
.nav-layout-option.active {
|
||||
background: color-mix(in srgb, var(--primary) 10%, var(--panel));
|
||||
border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
|
||||
color: var(--primary-strong);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.nav-layout-menu,
|
||||
.sort-menu,
|
||||
.create-menu {
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.route-stage {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.auth-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.standalone-shell {
|
||||
max-width: 430px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.standalone-brand {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.standalone-brand-logo {
|
||||
height: 48px;
|
||||
width: 60px;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.auth-card,
|
||||
.dialog-card,
|
||||
.card,
|
||||
.list-panel,
|
||||
.sidebar-block,
|
||||
.settings-subcard,
|
||||
.backup-operations-sidebar,
|
||||
.backup-destination-sidebar,
|
||||
.backup-detail-panel,
|
||||
.restore-progress-card,
|
||||
.backup-recommendation-card,
|
||||
.backup-destination-item,
|
||||
.backup-browser-list,
|
||||
.backup-browser-path,
|
||||
.totp-code-row,
|
||||
.mobile-settings-link,
|
||||
.table tr {
|
||||
border-color: var(--line);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.auth-card h1,
|
||||
.standalone-title {
|
||||
font-size: 26px;
|
||||
line-height: 1.18;
|
||||
}
|
||||
|
||||
.muted,
|
||||
.standalone-muted,
|
||||
.field-help,
|
||||
.settings-field-note,
|
||||
.backup-inline-note,
|
||||
.detail-sub,
|
||||
.list-sub,
|
||||
.backup-destination-meta {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.field > span {
|
||||
margin: 0 0 6px;
|
||||
color: var(--muted-strong);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.input,
|
||||
.search-input {
|
||||
height: 42px;
|
||||
border-radius: var(--radius-md);
|
||||
border-color: var(--line);
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
min-height: 96px;
|
||||
}
|
||||
|
||||
.input:hover:not(:disabled),
|
||||
.search-input:hover:not(:disabled) {
|
||||
border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
.search-input:focus {
|
||||
border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
|
||||
background: var(--panel);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 38px;
|
||||
min-width: 38px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 14px;
|
||||
box-shadow: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.btn.small,
|
||||
.topbar-actions .btn {
|
||||
height: 32px;
|
||||
border-radius: var(--radius-md);
|
||||
padding-inline: 10px;
|
||||
}
|
||||
|
||||
.btn.full {
|
||||
height: 44px;
|
||||
margin-block: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 20%, transparent);
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 24%, transparent);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--panel);
|
||||
border-color: var(--line);
|
||||
color: var(--primary-strong);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--primary) 6%, var(--panel));
|
||||
border-color: color-mix(in srgb, var(--primary) 26%, var(--line));
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: color-mix(in srgb, var(--danger) 5%, var(--panel));
|
||||
border-color: color-mix(in srgb, var(--danger) 24%, var(--line));
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--danger) 10%, var(--panel));
|
||||
border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
|
||||
}
|
||||
|
||||
.btn:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn:active:not(:disabled) {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-block {
|
||||
margin-bottom: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
color: var(--muted-strong);
|
||||
}
|
||||
|
||||
.tree-btn {
|
||||
min-height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.folder-delete-btn,
|
||||
.folder-sort-btn,
|
||||
.folder-add-btn,
|
||||
.search-clear-btn,
|
||||
.input-icon-btn,
|
||||
.eye-btn,
|
||||
.totp-copy-btn,
|
||||
.domain-rule-expand-btn,
|
||||
.domain-rule-mini-btn,
|
||||
.domain-rule-icon-btn,
|
||||
.password-history-close {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.list-col {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.list-head {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.list-count {
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.list-panel,
|
||||
.detail-col {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
min-height: 60px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--panel);
|
||||
border-color: var(--line-soft);
|
||||
}
|
||||
|
||||
.list-item::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background: var(--panel-subtle);
|
||||
border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.list-item:hover .row-main,
|
||||
.list-item.active .row-main,
|
||||
.list-item:hover .list-text,
|
||||
.list-item.active .list-text,
|
||||
.list-item:hover .list-sub,
|
||||
.list-item.active .list-sub {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.list-item:hover .list-title,
|
||||
.list-item.active .list-title {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.list-badge {
|
||||
background: var(--panel-muted);
|
||||
color: var(--muted-strong);
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 8px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.card h4,
|
||||
.settings-module h3,
|
||||
.section-head h3,
|
||||
.section-head h4 {
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.kv-line,
|
||||
.kv-row,
|
||||
.attachment-row,
|
||||
.custom-field-card,
|
||||
.table th,
|
||||
.table td {
|
||||
border-color: var(--line-soft);
|
||||
}
|
||||
|
||||
.kv-label,
|
||||
.kv-line > span,
|
||||
.table th {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.settings-modules-grid,
|
||||
.import-export-panels,
|
||||
.backup-grid,
|
||||
.domain-rules-grid {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.settings-module h3 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sensitive-action,
|
||||
.recovery-code-card,
|
||||
.api-key-warning-panel,
|
||||
.api-key-credentials-panel,
|
||||
.backup-recommendation-dav-item,
|
||||
.restore-progress-current,
|
||||
.restore-progress-elapsed {
|
||||
border-radius: var(--radius-md);
|
||||
border-color: var(--line-soft);
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.status-ok,
|
||||
.device-status-pill.online {
|
||||
color: var(--success);
|
||||
background: color-mix(in srgb, var(--success) 11%, var(--panel));
|
||||
}
|
||||
|
||||
.local-error,
|
||||
.api-key-warning-title {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.backup-grid {
|
||||
grid-template-columns: 260px 280px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.backup-operations-sidebar,
|
||||
.backup-destination-sidebar,
|
||||
.backup-detail-panel {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.backup-recommendations-summary,
|
||||
.backup-browser-path,
|
||||
.backup-browser-empty,
|
||||
.backup-destination-item {
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.backup-destination-item:hover {
|
||||
background: var(--panel);
|
||||
border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
|
||||
}
|
||||
|
||||
.totp-code-row {
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.totp-code-name {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 6px;
|
||||
}
|
||||
|
||||
.table tr {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.toast-item,
|
||||
.dialog-card {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] html,
|
||||
:root[data-theme='dark'] body,
|
||||
:root[data-theme='dark'] #root {
|
||||
background: var(--bg-accent);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .app-shell,
|
||||
:root[data-theme='dark'] .topbar,
|
||||
:root[data-theme='dark'] .app-side,
|
||||
:root[data-theme='dark'] .mobile-tabbar,
|
||||
:root[data-theme='dark'] .auth-card,
|
||||
:root[data-theme='dark'] .dialog-card,
|
||||
:root[data-theme='dark'] .card,
|
||||
:root[data-theme='dark'] .list-panel,
|
||||
:root[data-theme='dark'] .sidebar-block,
|
||||
:root[data-theme='dark'] .settings-subcard,
|
||||
:root[data-theme='dark'] .backup-operations-sidebar,
|
||||
:root[data-theme='dark'] .backup-destination-sidebar,
|
||||
:root[data-theme='dark'] .backup-detail-panel,
|
||||
:root[data-theme='dark'] .backup-recommendation-card,
|
||||
:root[data-theme='dark'] .backup-destination-item,
|
||||
:root[data-theme='dark'] .backup-browser-list,
|
||||
:root[data-theme='dark'] .backup-browser-path,
|
||||
:root[data-theme='dark'] .totp-code-row,
|
||||
:root[data-theme='dark'] .mobile-settings-link,
|
||||
:root[data-theme='dark'] .table tr,
|
||||
:root[data-theme='dark'] .list-item,
|
||||
:root[data-theme='dark'] .input,
|
||||
:root[data-theme='dark'] .search-input,
|
||||
:root[data-theme='dark'] .create-menu,
|
||||
:root[data-theme='dark'] .sort-menu,
|
||||
:root[data-theme='dark'] .nav-layout-menu {
|
||||
background: var(--panel);
|
||||
border-color: var(--line);
|
||||
color: var(--text);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .app-main,
|
||||
:root[data-theme='dark'] .app-side,
|
||||
:root[data-theme='dark'] .mobile-tabbar,
|
||||
:root[data-theme='dark'] .sensitive-action,
|
||||
:root[data-theme='dark'] .backup-recommendations-summary,
|
||||
:root[data-theme='dark'] .backup-browser-path,
|
||||
:root[data-theme='dark'] .backup-browser-empty,
|
||||
:root[data-theme='dark'] .backup-recommendation-dav-item,
|
||||
:root[data-theme='dark'] .restore-progress-current,
|
||||
:root[data-theme='dark'] .restore-progress-elapsed {
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .list-item:hover,
|
||||
:root[data-theme='dark'] .side-link:hover,
|
||||
:root[data-theme='dark'] .side-group-trigger:hover,
|
||||
:root[data-theme='dark'] .side-sub-link:hover,
|
||||
:root[data-theme='dark'] .mobile-tab:hover,
|
||||
:root[data-theme='dark'] .tree-btn:hover {
|
||||
background: var(--panel-subtle);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .btn-primary {
|
||||
color: #08111f;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.app-page {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: var(--mobile-topbar-height);
|
||||
padding-inline: 12px;
|
||||
}
|
||||
|
||||
.mobile-page-title {
|
||||
max-width: min(60vw, 260px);
|
||||
color: var(--text);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.mobile-tabbar {
|
||||
min-height: var(--mobile-tabbar-height);
|
||||
background: color-mix(in srgb, var(--panel) 96%, transparent);
|
||||
border-color: var(--line-soft);
|
||||
}
|
||||
|
||||
.mobile-tab {
|
||||
min-height: 48px;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.mobile-tab:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.mobile-tab.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.vault-grid {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mobile-detail-sheet {
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.mobile-sidebar-sheet {
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
border-radius: var(--radius-lg);
|
||||
border-color: var(--line);
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.list-head {
|
||||
grid-template-columns: minmax(0, 1fr) auto auto auto;
|
||||
}
|
||||
|
||||
.list-panel {
|
||||
padding: 6px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.list-item {
|
||||
min-height: 58px;
|
||||
padding: 9px 10px;
|
||||
}
|
||||
|
||||
.mobile-detail-sheet .card,
|
||||
.detail-col .card,
|
||||
.import-export-panel,
|
||||
.settings-subcard {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.mobile-detail-sheet .card {
|
||||
margin-bottom: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.detail-actions .actions .btn,
|
||||
.detail-delete-btn,
|
||||
.import-export-panel .actions .btn,
|
||||
.settings-subcard .actions .btn,
|
||||
.section-head .actions .btn {
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.toast-stack {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.auth-page {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
padding: 18px 16px;
|
||||
}
|
||||
|
||||
.standalone-shell {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.standalone-brand-logo {
|
||||
height: 42px;
|
||||
width: 53px;
|
||||
}
|
||||
|
||||
.standalone-brand-wordmark {
|
||||
width: clamp(176px, 58vw, 244px);
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.input,
|
||||
.search-input {
|
||||
height: 42px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.settings-modules-grid,
|
||||
.import-export-panels,
|
||||
.backup-grid,
|
||||
.domain-rules-grid {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.settings-module,
|
||||
.backup-operations-sidebar,
|
||||
.backup-destination-sidebar,
|
||||
.backup-detail-panel {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.backup-detail-panel > .section-head .actions .btn {
|
||||
min-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Final consistency pass for management controls and selected vault rows. */
|
||||
.toolbar .btn.small,
|
||||
.toolbar.actions .btn.small,
|
||||
.actions .btn.small,
|
||||
.topbar-actions .btn,
|
||||
.list-icon-btn,
|
||||
.sort-trigger,
|
||||
.mobile-fab-trigger,
|
||||
.website-remove-btn,
|
||||
.kv-actions .btn.small,
|
||||
.domain-rule-mini-btn,
|
||||
.domain-rule-icon-btn,
|
||||
.admin-pagination .btn,
|
||||
.invite-row-actions .btn,
|
||||
.admin-invites-head-actions .btn,
|
||||
input[type='file'].input::file-selector-button {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.mobile-fab-trigger,
|
||||
.sort-trigger,
|
||||
.totp-copy-btn,
|
||||
.input-icon-btn,
|
||||
.eye-btn,
|
||||
.search-clear-btn,
|
||||
.folder-delete-btn,
|
||||
.folder-sort-btn,
|
||||
.domain-rule-mini-btn,
|
||||
.domain-rule-icon-btn {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.list-item.active {
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--primary) 13%, var(--panel)) 0%, var(--panel) 72%);
|
||||
border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
|
||||
}
|
||||
|
||||
.list-item.active:hover {
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--primary) 17%, var(--panel)) 0%, var(--panel-subtle) 72%);
|
||||
border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
|
||||
}
|
||||
|
||||
.list-item.active .list-title,
|
||||
.list-item.active .list-icon-fallback {
|
||||
color: var(--primary-strong);
|
||||
}
|
||||
|
||||
.list-item.active .list-sub {
|
||||
color: var(--muted-strong);
|
||||
}
|
||||
|
||||
.admin-invites-card {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-invites-head {
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.admin-invites-head h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-invites-head-actions {
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.invite-toolbar {
|
||||
display: grid;
|
||||
align-items: end;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.invite-create-group {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(120px, 150px) auto;
|
||||
align-items: end;
|
||||
justify-content: start;
|
||||
gap: 10px;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.invite-hours-field {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.invite-hours-field > span {
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.invite-hours-field .input.small {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.invite-table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.invite-table th {
|
||||
height: 42px;
|
||||
padding: 9px 10px;
|
||||
background: var(--panel-soft);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.invite-table td {
|
||||
height: 48px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.invite-table tr {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.invite-table tbody tr:hover {
|
||||
background: var(--panel-subtle);
|
||||
}
|
||||
|
||||
.invite-table .empty {
|
||||
min-height: 72px;
|
||||
}
|
||||
|
||||
.invite-row-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.invite-pagination {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-top: 0;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .list-item.active {
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--primary) 22%, var(--panel)) 0%, var(--panel) 72%);
|
||||
border-color: color-mix(in srgb, var(--primary) 62%, var(--line));
|
||||
box-shadow:
|
||||
inset 3px 0 0 var(--primary),
|
||||
0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
|
||||
0 10px 24px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .list-item.active:hover {
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--primary) 26%, var(--panel)) 0%, var(--panel-subtle) 72%);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .list-item.active .list-title,
|
||||
:root[data-theme='dark'] .list-item.active .list-icon-fallback {
|
||||
color: var(--primary-strong);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .list-item.active .list-sub {
|
||||
color: var(--muted-strong);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .invite-toolbar,
|
||||
:root[data-theme='dark'] .invite-table th {
|
||||
background: var(--panel-soft);
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .invite-table tbody tr:hover {
|
||||
background: var(--panel-subtle);
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.admin-invites-head {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.admin-invites-head-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-invites-head-actions .btn {
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.invite-create-group {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.invite-create-group .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.invite-table {
|
||||
border-spacing: 0 8px;
|
||||
}
|
||||
|
||||
.invite-table tr {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.invite-row-actions {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.invite-row-actions .btn {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.invite-pagination {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,28 +1,34 @@
|
||||
:root {
|
||||
--bg-accent: #eef3fa;
|
||||
--bg-accent: #f3f6f9;
|
||||
--panel: #ffffff;
|
||||
--panel-soft: #f6f8fc;
|
||||
--panel-muted: #edf2f8;
|
||||
--panel-subtle: #f8fafc;
|
||||
--line: rgba(113, 132, 163, 0.28);
|
||||
--line-soft: rgba(113, 132, 163, 0.16);
|
||||
--text: #0b1730;
|
||||
--muted: #5f6f85;
|
||||
--muted-strong: #2f4058;
|
||||
--primary: #2563eb;
|
||||
--primary-hover: #1d4ed8;
|
||||
--primary-strong: #0f3f98;
|
||||
--danger: #d92d57;
|
||||
--panel-soft: #f8fafc;
|
||||
--panel-muted: #edf2f7;
|
||||
--panel-subtle: #fbfcfe;
|
||||
--surface: #ffffff;
|
||||
--line: rgba(100, 116, 139, 0.24);
|
||||
--line-soft: rgba(100, 116, 139, 0.14);
|
||||
--text: #111827;
|
||||
--text-muted: #64748b;
|
||||
--muted: #64748b;
|
||||
--muted-strong: #334155;
|
||||
--primary: #2457c5;
|
||||
--primary-hover: #1d4aa7;
|
||||
--primary-strong: #173f8f;
|
||||
--brand: var(--primary);
|
||||
--brand-strong: var(--primary-strong);
|
||||
--accent: #0f766e;
|
||||
--accent-soft: #e6f6f3;
|
||||
--danger: #c92f4e;
|
||||
--success: #0f766e;
|
||||
--warning: #b45309;
|
||||
--overlay-strong: rgba(15, 23, 42, 0.56);
|
||||
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
|
||||
--shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
--shadow-lg: 0 14px 38px rgba(15, 23, 42, 0.10);
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 14px;
|
||||
--radius-xl: 18px;
|
||||
--warning: #b7791f;
|
||||
--overlay-strong: rgba(15, 23, 42, 0.58);
|
||||
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.045);
|
||||
--shadow-md: 0 8px 18px rgba(15, 23, 42, 0.075);
|
||||
--shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.105);
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 10px;
|
||||
--radius-xl: 14px;
|
||||
--ease-out-strong: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--ease-out-soft: cubic-bezier(0.24, 0.8, 0.32, 1);
|
||||
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@@ -37,19 +43,25 @@
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] {
|
||||
--bg-accent: #0b1020;
|
||||
--panel: #111827;
|
||||
--panel-soft: #0f172a;
|
||||
--panel-muted: #0b1324;
|
||||
--panel-subtle: #151e2e;
|
||||
--line: rgba(148, 163, 184, 0.20);
|
||||
--line-soft: rgba(148, 163, 184, 0.12);
|
||||
--text: #e5edf8;
|
||||
--muted: #9aa8bb;
|
||||
--muted-strong: #c7d2e2;
|
||||
--primary: #8bb8ff;
|
||||
--primary-hover: #a9ccff;
|
||||
--primary-strong: #dceaff;
|
||||
--bg-accent: #101418;
|
||||
--panel: #171d25;
|
||||
--panel-soft: #131922;
|
||||
--panel-muted: #0f151d;
|
||||
--panel-subtle: #1c2430;
|
||||
--surface: #171d25;
|
||||
--line: rgba(148, 163, 184, 0.18);
|
||||
--line-soft: rgba(148, 163, 184, 0.11);
|
||||
--text: #e8edf4;
|
||||
--text-muted: #9aa8ba;
|
||||
--muted: #9aa8ba;
|
||||
--muted-strong: #c4cfdc;
|
||||
--primary: #80b6ff;
|
||||
--primary-hover: #a6cbff;
|
||||
--primary-strong: #d7e8ff;
|
||||
--brand: var(--primary);
|
||||
--brand-strong: var(--primary-strong);
|
||||
--accent: #5eead4;
|
||||
--accent-soft: rgba(94, 234, 212, 0.12);
|
||||
--danger: #fb7185;
|
||||
--success: #5eead4;
|
||||
--warning: #fbbf24;
|
||||
|
||||
Reference in New Issue
Block a user