kikimor/scalesApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move the hardcoded screens and user manager onto tokens

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