Move the hardcoded screens and user manager onto tokens
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,110 +1,110 @@
|
||||
.license-manager {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f7;
|
||||
background-color: var(--surface-sunken);
|
||||
}
|
||||
|
||||
.lm-body {
|
||||
padding: 20px;
|
||||
padding: var(--space-5);
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.lm-loading,
|
||||
.lm-empty {
|
||||
padding: 24px;
|
||||
padding: var(--space-6);
|
||||
text-align: center;
|
||||
color: #999;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.lm-toolbar {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.lm-back {
|
||||
padding: 6px 12px;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-1-5) var(--space-3);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: #666;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
|
||||
.lm-back:hover {
|
||||
border-color: #667eea;
|
||||
color: #667eea;
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.lm-ok,
|
||||
.lm-error {
|
||||
padding: 8px 12px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
font-size: var(--fs-base);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.lm-ok {
|
||||
background-color: #e8f5e9;
|
||||
border: 1px solid #c8e6c9;
|
||||
color: #2e7d32;
|
||||
background-color: var(--success-soft);
|
||||
border: 1px solid var(--success);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.lm-error {
|
||||
background-color: #fee;
|
||||
border: 1px solid #fcc;
|
||||
color: #c33;
|
||||
background-color: var(--danger-soft);
|
||||
border: 1px solid var(--danger);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.lm-panel {
|
||||
background: white;
|
||||
background: var(--surface);
|
||||
border-radius: 8px;
|
||||
padding: 18px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
padding: var(--space-5);
|
||||
margin-bottom: var(--space-4);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.lm-panel h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.lm-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
padding: var(--space-1) var(--space-2-5);
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: var(--space-2-5);
|
||||
}
|
||||
|
||||
.lm-badge--ok {
|
||||
background-color: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
background-color: var(--success-soft);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.lm-badge--warn {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
background-color: var(--warning-soft);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.lm-facts {
|
||||
display: grid;
|
||||
grid-template-columns: 140px 1fr;
|
||||
gap: 6px 12px;
|
||||
gap: var(--space-1-5) var(--space-3);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lm-facts dt {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
align-self: center;
|
||||
@@ -112,107 +112,107 @@
|
||||
|
||||
.lm-facts dd {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.lm-reason {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin: 0 0 var(--space-2) 0;
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.lm-grace {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
font-size: var(--fs-base);
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.lm-hint {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
font-size: var(--fs-base);
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.lm-fingerprint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.lm-fingerprint code {
|
||||
flex: 1;
|
||||
padding: 10px 12px;
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
padding: var(--space-2-5) var(--space-3);
|
||||
background-color: var(--surface-sunken);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 18px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--fs-xl);
|
||||
letter-spacing: 1px;
|
||||
color: #333;
|
||||
color: var(--text);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.lm-components {
|
||||
font-size: 11px !important;
|
||||
font-size: var(--fs-xs) !important;
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
.lm-fingerprint button {
|
||||
padding: 8px 14px;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: none;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-base);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.lm-fingerprint button:hover {
|
||||
border-color: #667eea;
|
||||
color: #667eea;
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.lm-details {
|
||||
margin-top: 10px;
|
||||
margin-top: var(--space-2-5);
|
||||
}
|
||||
|
||||
.lm-details summary {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.lm-blob {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-2-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--fs-sm);
|
||||
box-sizing: border-box;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.lm-install {
|
||||
margin-top: 10px;
|
||||
padding: 9px 18px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
margin-top: var(--space-2-5);
|
||||
padding: var(--space-2-5) var(--space-5);
|
||||
background: var(--accent-gradient);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--accent-contrast);
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lm-install:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
|
||||
box-shadow: 0 3px 8px var(--accent-soft);
|
||||
}
|
||||
|
||||
.lm-install:disabled {
|
||||
@@ -226,41 +226,41 @@
|
||||
}
|
||||
|
||||
.lm-table th {
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
font-size: 0.75rem;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text);
|
||||
font-size: var(--fs-sm);
|
||||
border-bottom: 2px solid var(--border);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
background-color: #f8f9fa;
|
||||
background-color: var(--surface-sunken);
|
||||
}
|
||||
|
||||
.lm-table td {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
font-size: 0.85rem;
|
||||
color: #333;
|
||||
font-family: 'Courier New', monospace;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Persistent, non-dismissible banner shown app-wide during grace */
|
||||
.license-banner {
|
||||
padding: 8px 16px;
|
||||
background-color: #fff3cd;
|
||||
border-bottom: 1px solid #ffe69c;
|
||||
color: #856404;
|
||||
font-size: 13px;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background-color: var(--warning-soft);
|
||||
border-bottom: 1px solid var(--warning);
|
||||
color: var(--warning);
|
||||
font-size: var(--fs-base);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.license-banner strong {
|
||||
font-weight: 600;
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
.license-banner--blocked {
|
||||
background-color: #fee;
|
||||
border-bottom-color: #fcc;
|
||||
color: #c33;
|
||||
background-color: var(--danger-soft);
|
||||
border-bottom-color: var(--danger);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
@@ -727,7 +727,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--backdrop);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -5,12 +5,12 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: var(--backdrop);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
padding: var(--space-5);
|
||||
animation: nmFadeIn 0.2s ease-in;
|
||||
}
|
||||
|
||||
@@ -21,9 +21,9 @@
|
||||
|
||||
/* Main content container */
|
||||
.nm-content {
|
||||
background: white;
|
||||
background: var(--surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-overlay);
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
max-height: 90vh;
|
||||
@@ -39,8 +39,8 @@
|
||||
|
||||
/* Header */
|
||||
.nm-header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 2px solid #667eea;
|
||||
padding: var(--space-5) var(--space-6);
|
||||
border-bottom: 2px solid var(--accent);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -49,15 +49,15 @@
|
||||
|
||||
.nm-header h2 {
|
||||
margin: 0;
|
||||
color: #667eea;
|
||||
font-size: 22px;
|
||||
color: var(--accent);
|
||||
font-size: var(--fs-2xl);
|
||||
}
|
||||
|
||||
.nm-close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
font-size: var(--fs-display);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
@@ -70,8 +70,8 @@
|
||||
}
|
||||
|
||||
.nm-close-button:hover {
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
background: var(--surface-sunken);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Body - two panels */
|
||||
@@ -85,28 +85,28 @@
|
||||
/* Left panel */
|
||||
.nm-list-panel {
|
||||
width: 250px;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nm-add-btn {
|
||||
margin: 12px;
|
||||
padding: 8px 16px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
margin: var(--space-3);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: var(--accent-gradient);
|
||||
color: var(--accent-contrast);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.nm-add-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
|
||||
box-shadow: 0 3px 8px var(--accent-soft);
|
||||
}
|
||||
|
||||
.nm-list {
|
||||
@@ -117,20 +117,20 @@
|
||||
.nm-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
padding: var(--space-2-5) var(--space-3);
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
transition: background 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nm-list-item:hover {
|
||||
background: #f5f5ff;
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.nm-list-item--active {
|
||||
background: #eef0ff;
|
||||
border-left: 3px solid #667eea;
|
||||
background: var(--accent-soft);
|
||||
border-left: 3px solid var(--accent);
|
||||
}
|
||||
|
||||
.nm-list-item--dragging {
|
||||
@@ -139,7 +139,7 @@
|
||||
|
||||
/* Inset shadow rather than a border, so the drop line adds no row height */
|
||||
.nm-list-item--drag-over {
|
||||
box-shadow: inset 0 2px 0 #667eea;
|
||||
box-shadow: inset 0 2px 0 var(--accent);
|
||||
}
|
||||
|
||||
.nm-list-item-info {
|
||||
@@ -149,9 +149,9 @@
|
||||
|
||||
.nm-list-item-name {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: var(--fw-semibold);
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -159,40 +159,40 @@
|
||||
|
||||
.nm-list-item-meta {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--text-muted);
|
||||
margin-top: var(--space-0-5);
|
||||
}
|
||||
|
||||
.nm-edit-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-lg);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
padding: var(--space-1);
|
||||
border-radius: 4px;
|
||||
transition: color 0.2s, background 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nm-edit-btn:hover {
|
||||
color: #667eea;
|
||||
background: #f0f0ff;
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.nm-loading {
|
||||
padding: 20px;
|
||||
padding: var(--space-5);
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.nm-empty {
|
||||
padding: 16px;
|
||||
padding: var(--space-4);
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
|
||||
/* Right panel */
|
||||
@@ -207,51 +207,51 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #999;
|
||||
font-size: 15px;
|
||||
padding: 40px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-lg);
|
||||
padding: var(--space-10);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nm-form {
|
||||
padding: 20px 24px;
|
||||
padding: var(--space-5) var(--space-6);
|
||||
}
|
||||
|
||||
.nm-form-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.nm-error {
|
||||
background-color: #fee;
|
||||
color: #c33;
|
||||
padding: 10px 14px;
|
||||
background-color: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
padding: var(--space-2-5) var(--space-4);
|
||||
border-radius: 6px;
|
||||
border: 1px solid #fcc;
|
||||
font-size: 13px;
|
||||
margin-bottom: 14px;
|
||||
border: 1px solid var(--danger);
|
||||
font-size: var(--fs-base);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
/* Form grid */
|
||||
.nm-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.nm-form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.nm-form-group label {
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
font-size: 12px;
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-sm);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
@@ -259,61 +259,61 @@
|
||||
.nm-form-group input[type="text"],
|
||||
.nm-form-group input[type="number"],
|
||||
.nm-form-group select {
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-2) var(--space-2-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-md);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.nm-form-group input:focus,
|
||||
.nm-form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.nm-form-group input:disabled,
|
||||
.nm-form-group select:disabled {
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--surface-sunken);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.nm-section {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.nm-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
margin-bottom: var(--space-2);
|
||||
padding-bottom: var(--space-1-5);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nm-section-header h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-md);
|
||||
color: var(--accent);
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
.nm-section-add {
|
||||
background: none;
|
||||
border: 1px solid #667eea;
|
||||
color: #667eea;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
padding: var(--space-1) var(--space-2-5);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.nm-section-add:hover {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
background: var(--accent);
|
||||
color: var(--accent-contrast);
|
||||
}
|
||||
|
||||
.nm-section-add:disabled {
|
||||
@@ -323,7 +323,7 @@
|
||||
|
||||
/* Fields table */
|
||||
.nm-fields-table {
|
||||
border: 1px solid #e0e0e0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -331,12 +331,12 @@
|
||||
.nm-fields-header {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 2fr 1.2fr 40px 32px;
|
||||
gap: 6px;
|
||||
padding: 6px 8px;
|
||||
background: #f8f8fc;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
gap: var(--space-1-5);
|
||||
padding: var(--space-1-5) var(--space-2);
|
||||
background: var(--surface-sunken);
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
@@ -344,38 +344,38 @@
|
||||
.nm-fields-row {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 2fr 1.2fr 40px 32px;
|
||||
gap: 6px;
|
||||
padding: 6px 8px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
gap: var(--space-1-5);
|
||||
padding: var(--space-1-5) var(--space-2);
|
||||
border-top: 1px solid var(--border);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nm-fields-row input[type="text"] {
|
||||
padding: 5px 8px;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-1-5) var(--space-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nm-fields-row input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.nm-fields-row select {
|
||||
padding: 5px 4px;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-1-5) var(--space-1);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nm-fields-row select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.nm-fields-row input[type="checkbox"] {
|
||||
@@ -388,8 +388,8 @@
|
||||
.nm-remove-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #ccc;
|
||||
font-size: 20px;
|
||||
color: var(--border-strong);
|
||||
font-size: var(--fs-2xl);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
@@ -402,8 +402,8 @@
|
||||
}
|
||||
|
||||
.nm-remove-btn:hover:not(:disabled) {
|
||||
color: #c33;
|
||||
background: #fee;
|
||||
color: var(--danger);
|
||||
background: var(--danger-soft);
|
||||
}
|
||||
|
||||
.nm-remove-btn:disabled {
|
||||
@@ -415,51 +415,51 @@
|
||||
.nm-entries {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.nm-entry {
|
||||
border: 1px solid #e0e0e0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
padding: var(--space-2-5) var(--space-3);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
gap: var(--space-2-5);
|
||||
}
|
||||
|
||||
.nm-entry--inactive {
|
||||
opacity: 0.5;
|
||||
background: #fafafa;
|
||||
background: var(--surface-sunken);
|
||||
}
|
||||
|
||||
.nm-entry-fields {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.nm-entry-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
gap: var(--space-0-5);
|
||||
min-width: 100px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nm-entry-field label {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--text-muted);
|
||||
font-weight: var(--fw-medium);
|
||||
}
|
||||
|
||||
.nm-entry-field input[type="text"],
|
||||
.nm-entry-field input[type="number"],
|
||||
.nm-entry-field select {
|
||||
padding: 5px 8px;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-1-5) var(--space-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -467,61 +467,61 @@
|
||||
.nm-entry-field input:focus,
|
||||
.nm-entry-field select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.nm-entry-field input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: 4px;
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.nm-entry-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: var(--space-1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nm-entry-save {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
background: var(--accent);
|
||||
color: var(--accent-contrast);
|
||||
border: none;
|
||||
padding: 4px 10px;
|
||||
padding: var(--space-1) var(--space-2-5);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.nm-entry-save:hover {
|
||||
background: #5568d3;
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.nm-entry-toggle {
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
background: var(--success-soft);
|
||||
color: var(--success);
|
||||
border: none;
|
||||
padding: 4px 10px;
|
||||
padding: var(--space-1) var(--space-2-5);
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.nm-entry-toggle:hover {
|
||||
background: #c8e6c9;
|
||||
background: color-mix(in srgb, var(--success) 25%, transparent);
|
||||
}
|
||||
|
||||
.nm-entry-toggle--inactive {
|
||||
background: #fff3e0;
|
||||
color: #e65100;
|
||||
background: var(--warning-soft);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.nm-entry-toggle--inactive:hover {
|
||||
background: #ffe0b2;
|
||||
background: color-mix(in srgb, var(--warning) 25%, transparent);
|
||||
}
|
||||
|
||||
/* Form actions */
|
||||
@@ -529,49 +529,49 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
margin-top: var(--space-5);
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nm-form-actions-right {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: var(--space-2-5);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.nm-cancel-btn {
|
||||
padding: 8px 20px;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
color: #666;
|
||||
padding: var(--space-2) var(--space-5);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.nm-cancel-btn:hover:not(:disabled) {
|
||||
border-color: #999;
|
||||
color: #333;
|
||||
border-color: var(--border-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nm-save-btn {
|
||||
padding: 8px 24px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: var(--space-2) var(--space-6);
|
||||
background: var(--accent-gradient);
|
||||
border: none;
|
||||
color: white;
|
||||
color: var(--accent-contrast);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.nm-save-btn:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
|
||||
box-shadow: 0 3px 8px var(--accent-soft);
|
||||
}
|
||||
|
||||
.nm-save-btn:disabled,
|
||||
@@ -581,19 +581,19 @@
|
||||
}
|
||||
|
||||
.nm-delete-btn {
|
||||
padding: 8px 16px;
|
||||
background: white;
|
||||
border: 1px solid #e57373;
|
||||
color: #c33;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--danger);
|
||||
color: var(--danger);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.nm-delete-btn:hover:not(:disabled) {
|
||||
background: #fee;
|
||||
background: var(--danger-soft);
|
||||
}
|
||||
|
||||
.nm-delete-btn:disabled {
|
||||
@@ -617,7 +617,7 @@
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nm-form-grid {
|
||||
@@ -628,50 +628,50 @@
|
||||
/* --- Selector options editor --- */
|
||||
.nm-options-empty {
|
||||
margin: 0;
|
||||
padding: 10px 8px;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
padding: var(--space-2-5) var(--space-2);
|
||||
font-size: var(--fs-base);
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.nm-option-row {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding: 8px;
|
||||
border-top: 1px solid var(--border);
|
||||
padding: var(--space-2);
|
||||
}
|
||||
|
||||
.nm-option-head {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 32px;
|
||||
gap: 6px;
|
||||
gap: var(--space-1-5);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nm-option-head input[type="text"] {
|
||||
padding: 5px 8px;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-1-5) var(--space-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nm-option-head input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.nm-option-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #c0392b;
|
||||
font-size: 18px;
|
||||
color: var(--danger);
|
||||
font-size: var(--fs-xl);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nm-option-remove:disabled {
|
||||
color: #ccc;
|
||||
color: var(--border-strong);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -679,14 +679,14 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 6px;
|
||||
padding-left: 2px;
|
||||
gap: var(--space-2-5);
|
||||
margin-top: var(--space-1-5);
|
||||
padding-left: var(--space-0-5);
|
||||
}
|
||||
|
||||
.nm-option-reveals-label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
@@ -694,8 +694,8 @@
|
||||
.nm-option-reveal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
gap: var(--space-1);
|
||||
font-size: var(--fs-base);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 13000;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: var(--backdrop);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -21,9 +21,9 @@
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
background: white;
|
||||
background: var(--surface);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: var(--shadow-overlay);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: nuiFormSlideUp 0.15s ease-out;
|
||||
@@ -38,18 +38,18 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
background-color: #f8f9fa;
|
||||
padding: var(--space-4) var(--space-6);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background-color: var(--surface-sunken);
|
||||
border-radius: 8px 8px 0 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nui-form-modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: var(--fs-xl);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nui-form-modal-close {
|
||||
@@ -60,8 +60,8 @@
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.4rem;
|
||||
color: #666;
|
||||
font-size: var(--fs-2xl);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
@@ -69,12 +69,12 @@
|
||||
}
|
||||
|
||||
.nui-form-modal-close:hover {
|
||||
background-color: #e9ecef;
|
||||
color: #333;
|
||||
background-color: var(--surface-hover);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nui-form-modal-content {
|
||||
padding: 1.5rem;
|
||||
padding: var(--space-6);
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
.nui-dropdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.nui-dropdown-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
@@ -15,58 +15,58 @@
|
||||
.nui-dropdown-label--checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nui-dropdown-row {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.nui-dropdown-select {
|
||||
flex: 1;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-2) var(--space-2-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
background-color: white;
|
||||
color: #333;
|
||||
font-size: var(--fs-md);
|
||||
background-color: var(--surface);
|
||||
color: var(--text);
|
||||
transition: border-color 0.2s;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.nui-dropdown-select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.nui-dropdown-select:disabled {
|
||||
background-color: #f0f0f0;
|
||||
background-color: var(--surface-hover);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.nui-dropdown-input {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-2) var(--space-2-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
background-color: white;
|
||||
color: #333;
|
||||
font-size: var(--fs-md);
|
||||
background-color: var(--surface);
|
||||
color: var(--text);
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nui-dropdown-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.nui-dropdown-input:disabled {
|
||||
background-color: #f0f0f0;
|
||||
background-color: var(--surface-hover);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
@@ -94,11 +94,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
font-size: var(--fs-xl);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
@@ -107,9 +107,9 @@
|
||||
}
|
||||
|
||||
.nui-dropdown-manage-btn:hover:not(:disabled) {
|
||||
border-color: #667eea;
|
||||
color: #667eea;
|
||||
background-color: #f0f0ff;
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background-color: var(--accent-soft);
|
||||
}
|
||||
|
||||
.nui-dropdown-manage-btn:disabled {
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
.nui-entry-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.nui-entry-form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.nui-entry-form-field > label {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-size: 0.9rem;
|
||||
font-weight: var(--fw-medium);
|
||||
color: var(--text);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.nui-entry-form-field input[type="text"],
|
||||
.nui-entry-form-field input[type="number"],
|
||||
.nui-entry-form-field select {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
background-color: white;
|
||||
color: #333;
|
||||
font-size: var(--fs-lg);
|
||||
background-color: var(--surface);
|
||||
color: var(--text);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -34,14 +34,14 @@
|
||||
.nui-entry-form-field input[type="number"]:focus,
|
||||
.nui-entry-form-field select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
|
||||
.nui-entry-form-field input[type="text"]:disabled,
|
||||
.nui-entry-form-field input[type="number"]:disabled,
|
||||
.nui-entry-form-field select:disabled {
|
||||
background-color: #f0f0f0;
|
||||
background-color: var(--surface-hover);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
@@ -58,23 +58,23 @@
|
||||
|
||||
/* Error state */
|
||||
.nui-entry-form-input-error {
|
||||
border-color: #dc3545 !important;
|
||||
border-color: var(--danger) !important;
|
||||
}
|
||||
|
||||
.nui-entry-form-error {
|
||||
font-size: 0.8rem;
|
||||
color: #dc3545;
|
||||
font-size: var(--fs-base);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* Checkbox field */
|
||||
.nui-entry-form-checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: var(--space-2);
|
||||
cursor: pointer;
|
||||
font-weight: normal !important;
|
||||
font-size: 0.95rem;
|
||||
color: #333;
|
||||
font-weight: var(--fw-regular) !important;
|
||||
font-size: var(--fs-lg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nui-entry-form-checkbox {
|
||||
@@ -86,27 +86,27 @@
|
||||
/* Actions */
|
||||
.nui-entry-form-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
gap: var(--space-3);
|
||||
justify-content: flex-end;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #eee;
|
||||
margin-top: var(--space-4);
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nui-entry-form-cancel {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background-color: var(--text-muted);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--space-2) var(--space-6);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, transform 0.1s;
|
||||
}
|
||||
|
||||
.nui-entry-form-cancel:hover {
|
||||
background-color: #5a6268;
|
||||
background-color: var(--text);
|
||||
}
|
||||
|
||||
.nui-entry-form-cancel:active {
|
||||
@@ -114,19 +114,19 @@
|
||||
}
|
||||
|
||||
.nui-entry-form-save {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: var(--accent-gradient);
|
||||
color: var(--accent-contrast);
|
||||
padding: var(--space-2) var(--space-6);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s, transform 0.1s;
|
||||
}
|
||||
|
||||
.nui-entry-form-save:hover:not(:disabled) {
|
||||
box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
|
||||
box-shadow: 0 3px 8px var(--accent-soft);
|
||||
}
|
||||
|
||||
.nui-entry-form-save:active:not(:disabled) {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 12000;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--backdrop);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -21,9 +21,9 @@
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
max-height: 90vh;
|
||||
background: white;
|
||||
background: var(--surface);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: var(--shadow-overlay);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: nuiMgmtSlideUp 0.15s ease-out;
|
||||
@@ -39,18 +39,18 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
background-color: #f8f9fa;
|
||||
padding: var(--space-4) var(--space-6);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background-color: var(--surface-sunken);
|
||||
border-radius: 8px 8px 0 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nui-mgmt-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: var(--fs-xl);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nui-mgmt-close {
|
||||
@@ -61,8 +61,8 @@
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: #666;
|
||||
font-size: var(--fs-2xl);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
@@ -70,60 +70,60 @@
|
||||
}
|
||||
|
||||
.nui-mgmt-close:hover {
|
||||
background-color: #e9ecef;
|
||||
color: #333;
|
||||
background-color: var(--surface-hover);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.nui-mgmt-toolbar {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4) var(--space-6);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nui-mgmt-search {
|
||||
flex: 1;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #ced4da;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
font-size: var(--fs-lg);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.nui-mgmt-search:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 0.2rem var(--accent-soft);
|
||||
}
|
||||
|
||||
.nui-mgmt-add-btn {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--success);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nui-mgmt-add-btn:hover {
|
||||
background-color: #218838;
|
||||
background-color: color-mix(in srgb, var(--success) 85%, var(--text));
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.nui-mgmt-error {
|
||||
margin: 0.5rem 1.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #fee;
|
||||
color: #c33;
|
||||
border: 1px solid #fcc;
|
||||
margin: var(--space-2) var(--space-6);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background-color: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
border: 1px solid var(--danger);
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
font-size: var(--fs-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -141,17 +141,17 @@
|
||||
}
|
||||
|
||||
.nui-mgmt-table-container::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
background: var(--surface-sunken);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.nui-mgmt-table-container::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
background: var(--text-muted);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.nui-mgmt-table-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
background: var(--text);
|
||||
}
|
||||
|
||||
/* Table */
|
||||
@@ -161,19 +161,19 @@
|
||||
}
|
||||
|
||||
.nui-mgmt-table thead {
|
||||
background-color: #f8f9fa;
|
||||
background-color: var(--surface-sunken);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nui-mgmt-table th {
|
||||
padding: 0.6rem 1rem;
|
||||
padding: var(--space-2-5) var(--space-4);
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
font-size: 0.85rem;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text);
|
||||
font-size: var(--fs-md);
|
||||
border-bottom: 2px solid var(--border);
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
@@ -195,16 +195,16 @@
|
||||
}
|
||||
|
||||
.nui-mgmt-table td {
|
||||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
font-size: 0.95rem;
|
||||
color: #333;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: var(--fs-lg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nui-mgmt-td-id {
|
||||
text-align: center;
|
||||
color: #888;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.nui-mgmt-td-status {
|
||||
@@ -222,15 +222,15 @@
|
||||
}
|
||||
|
||||
.nui-mgmt-row:hover {
|
||||
background-color: #f0f0ff;
|
||||
background-color: var(--surface-hover);
|
||||
}
|
||||
|
||||
.nui-mgmt-row--selected {
|
||||
background-color: #e8eaff;
|
||||
background-color: var(--accent-soft);
|
||||
}
|
||||
|
||||
.nui-mgmt-row--selected:hover {
|
||||
background-color: #dcdeff;
|
||||
background-color: color-mix(in srgb, var(--accent) 20%, transparent);
|
||||
}
|
||||
|
||||
.nui-mgmt-row--inactive {
|
||||
@@ -239,7 +239,7 @@
|
||||
|
||||
.nui-mgmt-row--inactive td {
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nui-mgmt-row--inactive .nui-mgmt-td-id,
|
||||
@@ -251,56 +251,56 @@
|
||||
/* Active badge */
|
||||
.nui-mgmt-active-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
padding: var(--space-0-5) var(--space-2);
|
||||
border-radius: 10px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nui-mgmt-active-badge--active {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
background-color: var(--success-soft);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.nui-mgmt-active-badge--active:hover {
|
||||
background-color: #c3e6cb;
|
||||
background-color: color-mix(in srgb, var(--success) 25%, transparent);
|
||||
}
|
||||
|
||||
.nui-mgmt-active-badge--inactive {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
background-color: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.nui-mgmt-active-badge--inactive:hover {
|
||||
background-color: #f5c6cb;
|
||||
background-color: color-mix(in srgb, var(--danger) 25%, transparent);
|
||||
}
|
||||
|
||||
/* Edit button in row */
|
||||
.nui-mgmt-edit-btn {
|
||||
background: none;
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nui-mgmt-edit-btn:hover {
|
||||
background-color: #e9ecef;
|
||||
border-color: #adb5bd;
|
||||
color: #333;
|
||||
background-color: var(--surface-hover);
|
||||
border-color: var(--border-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.nui-mgmt-empty {
|
||||
text-align: center;
|
||||
padding: 2rem !important;
|
||||
color: #999;
|
||||
padding: var(--space-8) !important;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -309,75 +309,75 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 1px solid #dee2e6;
|
||||
background-color: #f8f9fa;
|
||||
padding: var(--space-4) var(--space-6);
|
||||
border-top: 1px solid var(--border);
|
||||
background-color: var(--surface-sunken);
|
||||
border-radius: 0 0 8px 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nui-mgmt-footer-info {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nui-mgmt-footer-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.nui-mgmt-footer-edit-btn {
|
||||
background: none;
|
||||
border: 1px solid #667eea;
|
||||
color: #667eea;
|
||||
padding: 0.4rem 1rem;
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
padding: var(--space-1-5) var(--space-4);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nui-mgmt-footer-edit-btn:hover {
|
||||
background-color: #667eea;
|
||||
color: white;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-contrast);
|
||||
}
|
||||
|
||||
.nui-mgmt-delete-btn {
|
||||
background: none;
|
||||
border: 1px solid #dc3545;
|
||||
color: #dc3545;
|
||||
padding: 0.4rem 1rem;
|
||||
border: 1px solid var(--danger);
|
||||
color: var(--danger);
|
||||
padding: var(--space-1-5) var(--space-4);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nui-mgmt-delete-btn:hover {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
background-color: var(--danger);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.nui-mgmt-select-btn {
|
||||
background-color: #667eea;
|
||||
color: white;
|
||||
padding: 0.4rem 1.5rem;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-contrast);
|
||||
padding: var(--space-1-5) var(--space-6);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.nui-mgmt-select-btn:hover:not(:disabled) {
|
||||
background-color: #5568d3;
|
||||
background-color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.nui-mgmt-select-btn:disabled {
|
||||
background-color: #6c757d;
|
||||
background-color: var(--text-muted);
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.report-preview-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background: var(--backdrop);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -4,12 +4,12 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: var(--backdrop);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
padding: var(--space-5);
|
||||
animation: fadeIn 0.2s ease-in;
|
||||
}
|
||||
|
||||
@@ -23,9 +23,9 @@
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
background: white;
|
||||
background: var(--surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-overlay);
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
max-height: 90vh;
|
||||
@@ -45,8 +45,8 @@
|
||||
}
|
||||
|
||||
.overlay-header {
|
||||
padding: 24px 24px 16px;
|
||||
border-bottom: 2px solid #667eea;
|
||||
padding: var(--space-6) var(--space-6) var(--space-4);
|
||||
border-bottom: 2px solid var(--accent);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -54,15 +54,15 @@
|
||||
|
||||
.overlay-header h2 {
|
||||
margin: 0;
|
||||
color: #667eea;
|
||||
font-size: 24px;
|
||||
color: var(--accent);
|
||||
font-size: var(--fs-2xl);
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
font-size: var(--fs-display);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
@@ -75,84 +75,84 @@
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
background: var(--surface-sunken);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.password-form {
|
||||
padding: 24px;
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e0e0e0;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-size: var(--fs-lg);
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.form-group input:disabled {
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--surface-sunken);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.cancel-button,
|
||||
.submit-button {
|
||||
flex: 1;
|
||||
padding: 12px 24px;
|
||||
padding: var(--space-3) var(--space-6);
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background: white;
|
||||
border: 2px solid #ddd;
|
||||
color: #666;
|
||||
background: var(--surface);
|
||||
border: 2px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.cancel-button:hover:not(:disabled) {
|
||||
border-color: #999;
|
||||
color: #333;
|
||||
border-color: var(--border-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: var(--accent-gradient);
|
||||
border: none;
|
||||
color: white;
|
||||
color: var(--accent-contrast);
|
||||
}
|
||||
|
||||
.submit-button:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
box-shadow: 0 4px 12px var(--accent-soft);
|
||||
}
|
||||
|
||||
.cancel-button:disabled,
|
||||
@@ -162,16 +162,16 @@
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #fee;
|
||||
color: #c33;
|
||||
padding: 12px 16px;
|
||||
background-color: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #fcc;
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--danger);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.success-message {
|
||||
padding: 40px 24px;
|
||||
padding: var(--space-10) var(--space-6);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -179,13 +179,13 @@
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
background: var(--accent-gradient);
|
||||
color: var(--accent-contrast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
margin: 0 auto 16px;
|
||||
font-size: var(--fs-display);
|
||||
margin: 0 auto var(--space-4);
|
||||
animation: scaleIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
@@ -200,9 +200,9 @@
|
||||
|
||||
.success-message p {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
font-size: var(--fs-xl);
|
||||
font-weight: var(--fw-medium);
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
@@ -211,7 +211,7 @@
|
||||
}
|
||||
|
||||
.password-form {
|
||||
padding: 20px;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
|
||||
@@ -3,88 +3,88 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
background: var(--accent-gradient);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: white;
|
||||
background: var(--surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: var(--shadow-overlay);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 40px;
|
||||
padding: var(--space-10);
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #667eea;
|
||||
font-size: 32px;
|
||||
margin: 0 0 var(--space-2-5) 0;
|
||||
color: var(--accent);
|
||||
font-size: var(--fs-display);
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-lg);
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e0e0e0;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-size: var(--fs-lg);
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.form-group input:disabled {
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--surface-sunken);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
padding: 14px 24px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: var(--space-4) var(--space-6);
|
||||
background: var(--accent-gradient);
|
||||
color: var(--accent-contrast);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
margin-top: 10px;
|
||||
margin-top: var(--space-2-5);
|
||||
}
|
||||
|
||||
.login-button:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
box-shadow: 0 4px 12px var(--accent-soft);
|
||||
}
|
||||
|
||||
.login-button:active:not(:disabled) {
|
||||
@@ -97,12 +97,12 @@
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #fee;
|
||||
color: #c33;
|
||||
padding: 12px 16px;
|
||||
background-color: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #fcc;
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--danger);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.loading {
|
||||
@@ -111,18 +111,18 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
background: var(--accent-gradient);
|
||||
color: var(--accent-contrast);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 4px solid white;
|
||||
border: 4px solid color-mix(in srgb, var(--accent-contrast) 30%, transparent);
|
||||
border-top: 4px solid var(--accent-contrast);
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: var(--space-2-5);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
@@ -132,10 +132,10 @@
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-card {
|
||||
padding: 30px 20px;
|
||||
padding: var(--space-8) var(--space-5);
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
font-size: 28px;
|
||||
font-size: var(--fs-3xl);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
/* The form and buttons reuse Main.css classes (.extra-field,
|
||||
.vehicle-form-actions, .extra-save-btn ...); the compound selectors below
|
||||
exist only to outrank those where this screen differs. */
|
||||
|
||||
.um-page {
|
||||
padding: var(--space-6);
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.um-toolbar {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.um-add-form {
|
||||
margin-bottom: var(--space-6);
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface-sunken);
|
||||
}
|
||||
|
||||
.um-add-form-title {
|
||||
margin: 0 0 var(--space-4) 0;
|
||||
font-size: var(--fs-md);
|
||||
color: var(--accent);
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
.extra-field.um-permission-field {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
/* Three classes deep to outrank the cockpit `.extra-field label` rule */
|
||||
.um-add-form .extra-field.um-permission-field label {
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vehicle-form-actions.um-form-actions {
|
||||
margin-top: var(--space-4);
|
||||
padding-top: var(--space-3);
|
||||
}
|
||||
|
||||
.um-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.um-table thead tr {
|
||||
border-bottom: 2px solid var(--border);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.um-table th,
|
||||
.um-table td {
|
||||
padding: var(--space-2-5) var(--space-3);
|
||||
}
|
||||
|
||||
.um-table th {
|
||||
color: var(--text-muted);
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
.um-row {
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.um-row--inactive {
|
||||
background: var(--surface-sunken);
|
||||
}
|
||||
|
||||
.um-table .um-username {
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.um-table .um-cell-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.um-status {
|
||||
display: inline-block;
|
||||
padding: var(--space-0-5) var(--space-2);
|
||||
border-radius: 10px;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-semibold);
|
||||
background: var(--success-soft);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.um-status--inactive {
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.um-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.um-table .um-action-btn {
|
||||
font-size: var(--fs-sm);
|
||||
padding: var(--space-1-5) var(--space-3);
|
||||
}
|
||||
|
||||
.um-table .um-empty {
|
||||
padding: var(--space-5);
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import api from '../../services/api';
|
||||
import Header from '../Header';
|
||||
import './UserManager.css';
|
||||
|
||||
const PERMISSION_FIELDS = [
|
||||
{ key: 'can_measure', label: 'Can Measure' },
|
||||
@@ -87,12 +88,12 @@ export default function UserManager() {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<div style={{ padding: '24px', maxWidth: '900px' }}>
|
||||
<div className="um-page">
|
||||
<h2 className="vehicle-detail-title">User Manager</h2>
|
||||
|
||||
{error && <div className="vehicle-error">{error}</div>}
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<div className="um-toolbar">
|
||||
<button
|
||||
className="vehicle-add-btn"
|
||||
onClick={() => setAddFormOpen(prev => !prev)}
|
||||
@@ -102,8 +103,8 @@ export default function UserManager() {
|
||||
</div>
|
||||
|
||||
{addFormOpen && (
|
||||
<form onSubmit={handleAddUser} style={{ marginBottom: '24px', padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px', background: '#fafafa' }}>
|
||||
<h3 style={{ margin: '0 0 14px 0', fontSize: '14px', color: '#667eea', fontWeight: 600 }}>New User</h3>
|
||||
<form onSubmit={handleAddUser} className="um-add-form">
|
||||
<h3 className="um-add-form-title">New User</h3>
|
||||
<div className="extra-fields">
|
||||
<div className="extra-field">
|
||||
<label>Username</label>
|
||||
@@ -125,18 +126,18 @@ export default function UserManager() {
|
||||
/>
|
||||
</div>
|
||||
{PERMISSION_FIELDS.map(({ key, label }) => (
|
||||
<div key={key} className="extra-field" style={{ flexDirection: 'row', alignItems: 'center', gap: '8px' }}>
|
||||
<div key={key} className="extra-field um-permission-field">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`new-${key}`}
|
||||
checked={newUser[key]}
|
||||
onChange={e => setNewUser(prev => ({ ...prev, [key]: e.target.checked }))}
|
||||
/>
|
||||
<label htmlFor={`new-${key}`} style={{ textTransform: 'none', letterSpacing: 'normal', cursor: 'pointer' }}>{label}</label>
|
||||
<label htmlFor={`new-${key}`}>{label}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="vehicle-form-actions" style={{ marginTop: '14px', paddingTop: '12px' }}>
|
||||
<div className="vehicle-form-actions um-form-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="vehicle-form-cancel"
|
||||
@@ -155,60 +156,50 @@ export default function UserManager() {
|
||||
</form>
|
||||
)}
|
||||
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '14px' }}>
|
||||
<table className="um-table">
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '2px solid #e0e0e0', textAlign: 'left' }}>
|
||||
<th style={{ padding: '10px 12px', color: '#555', fontWeight: 600 }}>Username</th>
|
||||
<th style={{ padding: '10px 12px', color: '#555', fontWeight: 600 }}>Status</th>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Status</th>
|
||||
{PERMISSION_FIELDS.map(({ key, label }) => (
|
||||
<th key={key} style={{ padding: '10px 12px', color: '#555', fontWeight: 600 }}>{label}</th>
|
||||
<th key={key}>{label}</th>
|
||||
))}
|
||||
<th style={{ padding: '10px 12px', color: '#555', fontWeight: 600 }}>Actions</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map(u => (
|
||||
<tr key={u.id} style={{ borderBottom: '1px solid #f0f0f0', background: u.is_active ? 'white' : '#fafafa' }}>
|
||||
<td style={{ padding: '10px 12px', fontWeight: 600, color: '#333' }}>{u.username}</td>
|
||||
<td style={{ padding: '10px 12px' }}>
|
||||
<span style={{
|
||||
display: 'inline-block',
|
||||
padding: '2px 8px',
|
||||
borderRadius: '10px',
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
background: u.is_active ? '#e8f5e9' : '#fce4ec',
|
||||
color: u.is_active ? '#2e7d32' : '#c62828',
|
||||
}}>
|
||||
<tr key={u.id} className={u.is_active ? 'um-row' : 'um-row um-row--inactive'}>
|
||||
<td className="um-username">{u.username}</td>
|
||||
<td>
|
||||
<span className={u.is_active ? 'um-status' : 'um-status um-status--inactive'}>
|
||||
{u.is_active ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
</td>
|
||||
{PERMISSION_FIELDS.map(({ key }) => (
|
||||
<td key={key} style={{ padding: '10px 12px', textAlign: 'center' }}>
|
||||
<td key={key} className="um-cell-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!u[key]}
|
||||
onChange={e => handlePermissionChange(u.id, key, e.target.checked)}
|
||||
style={{ width: '18px', height: '18px', cursor: 'pointer' }}
|
||||
className="um-checkbox"
|
||||
/>
|
||||
</td>
|
||||
))}
|
||||
<td style={{ padding: '10px 12px' }}>
|
||||
<td>
|
||||
{u.is_active ? (
|
||||
<button
|
||||
className="vehicle-form-cancel"
|
||||
className="vehicle-form-cancel um-action-btn"
|
||||
onClick={() => handleDeactivate(u.id)}
|
||||
disabled={u.id === currentUser?.id}
|
||||
title={u.id === currentUser?.id ? 'Cannot deactivate yourself' : undefined}
|
||||
style={{ fontSize: '12px', padding: '5px 12px' }}
|
||||
>
|
||||
Deactivate
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="extra-save-btn"
|
||||
className="extra-save-btn um-action-btn"
|
||||
onClick={() => handleReactivate(u.id)}
|
||||
style={{ fontSize: '12px', padding: '5px 12px' }}
|
||||
>
|
||||
Reactivate
|
||||
</button>
|
||||
@@ -218,7 +209,7 @@ export default function UserManager() {
|
||||
))}
|
||||
{users.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={PERMISSION_FIELDS.length + 3} style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
|
||||
<td colSpan={PERMISSION_FIELDS.length + 3} className="um-empty">
|
||||
No users found
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
--shadow-raised: 0 3px 8px rgba(0, 0, 0, 0.12);
|
||||
--shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.18);
|
||||
/* The dim behind a modal */
|
||||
--backdrop: rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* The header is its own surface: a saturated bar with white chrome on it,
|
||||
so it cannot borrow --surface/--text without losing that contrast. */
|
||||
@@ -128,6 +130,9 @@
|
||||
--shadow-raised: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
|
||||
0 6px 18px rgba(0, 0, 0, 0.6);
|
||||
--shadow-overlay: 0 12px 48px rgba(0, 0, 0, 0.7);
|
||||
/* Tinted with --bg rather than pure black, so the page behind a modal
|
||||
sinks into the theme instead of turning grey. */
|
||||
--backdrop: rgba(2, 10, 18, 0.75);
|
||||
|
||||
--header-bg: linear-gradient(180deg, #0a2336 0%, #04121e 100%);
|
||||
--header-text: #d9f6ff;
|
||||
|
||||
Reference in New Issue
Block a user