mirror of
https://github.com/shuaiplus/nodewarden.git
synced 2026-06-20 21:00:41 +00:00
feat: enhance admin invites UI and improve styling for better usability
This commit is contained in:
shuaiplus
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user