Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 gitea
|
4b0739ba06 | ||
|
gitea
|
32aa2eeda9 | ||
|
gitea
|
82f3a674a3 | ||
|
gitea
|
68cf541bbe | ||
|
gitea
|
ee599978da | ||
|
gitea
|
63056f5b42 |
@@ -0,0 +1,88 @@
|
||||
# CSS design tokens — typography, spacing, and full colour migration
|
||||
|
||||
## Context
|
||||
`src/styles/tokens.css` already defines semantic colour/radius/shadow tokens for
|
||||
two themes (`classic`, `cockpit`). But:
|
||||
- there are no font or spacing tokens: ~25 distinct font-sizes (7px…40px, px and
|
||||
rem mixed), 9 font-family declarations, ~25 distinct padding/margin/gap values;
|
||||
- about half the stylesheets still hardcode colours (`#667eea` ×88, `#333` ×42 …),
|
||||
so those screens ignore the theme — they stay light under `cockpit`;
|
||||
- `UserManager.jsx` styles itself entirely with inline `style={{}}`.
|
||||
|
||||
Goal: every UI value (colour, font, size, weight, spacing) comes from a token, so
|
||||
the look is changed in one file. Report *output* keeps fixed values.
|
||||
|
||||
## What stays fixed (not tokenised)
|
||||
Printed/rendered report output must look identical regardless of screen theme:
|
||||
- `ReportEditor/a4/a4Elements.css`, `a4/print/print.css`, `ReportEditor/print/print.css`,
|
||||
`ReportEditor/elements.css` (text-mode report elements on the page)
|
||||
- colours in A4 element JSX (`a4/elements/*`), `calibrationReport.js`, `sampleData.js`, tests
|
||||
- the "paper" surface itself (white page in `A4Canvas.css` / `EditorCanvas.css`)
|
||||
|
||||
The report **editor chrome** around it (toolbar, inspectors, config panel, character
|
||||
palette, kind chooser, page setup, selection handles/guides) *does* get tokens.
|
||||
|
||||
Also left alone: `components/concepts/ScalesAppCyberpunk.css` (standalone mockup
|
||||
with its own private vars). `DataDisplay.jsx/.css` is not imported anywhere — dead
|
||||
code, flagged, not touched.
|
||||
|
||||
## New tokens (in `:root` only — theme-independent, both themes share them)
|
||||
```css
|
||||
/* Type */
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: 'Courier New', Consolas, monospace;
|
||||
|
||||
--fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px;
|
||||
--fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px;
|
||||
--fs-display: 32px; /* big figures: the weight reading etc. */
|
||||
|
||||
--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
|
||||
|
||||
/* Spacing — 4px grid with the half-steps this UI actually uses a lot (6, 10) */
|
||||
--space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px;
|
||||
--space-2-5: 10px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
|
||||
--space-6: 24px; --space-8: 32px; --space-10: 40px;
|
||||
```
|
||||
A theme may later override any of these (e.g. a larger `--fs-display` for cockpit).
|
||||
|
||||
**Snapping rule:** off-scale values snap to the nearest step (5→4/6, 7→6/8,
|
||||
14→12/16, 15/17→16, 20→22 for font, rem values converted at 16px). Expect ≤2px
|
||||
drift in places — that's the consistency we're buying. Values that are
|
||||
geometry rather than rhythm (1px borders, icon/checkbox sizes, fixed widths,
|
||||
`letter-spacing`) stay literal.
|
||||
|
||||
**Colour mapping** for stray literals (add a token only if nothing fits):
|
||||
`#667eea`→`--accent`, `#764ba2` gradients→`--accent-gradient`,
|
||||
`#333/#2c3e50`→`--text`, `#555/#666/#888/#999`→`--text-muted`,
|
||||
`#ddd/#e0e0e0/#dee2e6`→`--border`, `#f5f5f5/#fafafa/#f0f0f0`→`--surface-sunken`/`--surface-hover`,
|
||||
`white/#fff`→`--surface`, `#fee/#c33`→`--danger-soft`/`--danger`, greens/oranges→`--success*`/`--warning*`.
|
||||
Likely one new token: `--backdrop` (modal overlay dim).
|
||||
|
||||
## Phases (one commit each; done via `/dispatch` → react-expert-dev)
|
||||
1. **Tokens** — add the block above to `tokens.css`; `index.css` body uses
|
||||
`--font-sans`, `code` uses `--font-mono`.
|
||||
2. **Screens already on colour tokens** — swap font/spacing literals:
|
||||
`Main.css`, `ScaleMonitor.css`, `Header.css`, `History.css`,
|
||||
`ExtraCombinationsTable.css`, `App.css`, `ReportPreviewModal.css`.
|
||||
3. **Hardcoded screens** — colours + fonts + spacing:
|
||||
`NomenclatureManager.css`, `NomenclatureUI/*.css` (ManagementOverlay, EntryForm,
|
||||
Dropdown, FormOverlay), `LicenseManager.css`, `Login.css`, `ChangePasswordOverlay.css`.
|
||||
`UserManager.jsx`: move inline styles into a new `UserManager.css` (reuse existing
|
||||
Main.css classes like `.extra-field`, `.vehicle-form-actions` where they already fit).
|
||||
4. **Report editor chrome** — `ReportEditor.css`, `Toolbar.css`, `ObjectInspector.css`,
|
||||
`ConfigPanel.css`, `CharacterPalette.css`, `EditorCanvas.css` (non-paper parts),
|
||||
`a4/A4Canvas.css` (non-paper), `A4Inspector.css`, `A4PageSetup.css`,
|
||||
`A4KindChooser.css`, `A4ReportEditor.css`; chrome colours in `A4Canvas.jsx` /
|
||||
`A4Inspector.jsx` / `ObjectInspector.jsx` (guides, handles) → `var(--…)`.
|
||||
|
||||
## Verification
|
||||
- After each phase: grep for `#[0-9a-f]{3,6}`, `font-size: *[0-9]`, px spacing in the
|
||||
touched files → only allowed literals remain.
|
||||
- End state: hex colours exist only in `tokens.css`, the "fixed" report files, and the
|
||||
concept page.
|
||||
- `npm run build` passes.
|
||||
- Visual: screenshots (Playwright, saved to `.claude/screenshots/`) of main screen,
|
||||
nomenclature manager, login, licence, user manager, both report editors — in
|
||||
`classic` and `cockpit`, before and after. Classic should look the same (±snapping);
|
||||
cockpit should now be dark on the previously-light screens.
|
||||
- Test suite only when you say "ready for testing".
|
||||
@@ -1,14 +1,3 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "src",
|
||||
"paths": {
|
||||
"@components/*": ["components/*"],
|
||||
"@contexts/*": ["contexts/*"],
|
||||
"@hooks/*": ["hooks/*"],
|
||||
"@utils/*": ["utils/*"],
|
||||
"@services/*": ["services/*"],
|
||||
"@assets/*": ["assets/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
||||
+15
-15
@@ -7,34 +7,34 @@
|
||||
|
||||
.status-bar {
|
||||
background: var(--surface);
|
||||
padding: 12px 20px;
|
||||
padding: var(--space-3) var(--space-5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
gap: var(--space-5);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.status-connected {
|
||||
color: var(--success);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-medium);
|
||||
}
|
||||
|
||||
.status-disconnected {
|
||||
color: var(--danger);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-medium);
|
||||
}
|
||||
|
||||
.status-error {
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
padding: 0 20px;
|
||||
margin: var(--space-5) auto;
|
||||
padding: 0 var(--space-5);
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -42,16 +42,16 @@
|
||||
.error-message {
|
||||
background-color: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
padding: 12px 20px;
|
||||
padding: var(--space-3) var(--space-5);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: var(--space-5);
|
||||
border: 1px solid var(--danger);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
font-size: 18px;
|
||||
padding: var(--space-10);
|
||||
font-size: var(--fs-xl);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@@ -59,10 +59,10 @@
|
||||
.status-bar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 10px;
|
||||
padding: 0 var(--space-2-5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
.extra-combos {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.extra-combos h3 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 12px;
|
||||
margin: 0 0 var(--space-2) 0;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
font-weight: var(--fw-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.extra-combos-error {
|
||||
padding: 6px 10px;
|
||||
padding: var(--space-1-5) var(--space-2-5);
|
||||
background-color: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
border: 1px solid var(--danger);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
font-size: var(--fs-sm);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.extra-combos-table-container {
|
||||
@@ -61,11 +61,11 @@
|
||||
}
|
||||
|
||||
.extra-combos-table th {
|
||||
padding: 0.4rem 0.75rem;
|
||||
padding: var(--space-1-5) var(--space-3);
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
font-size: var(--fs-sm);
|
||||
border-bottom: 2px solid var(--border);
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
@@ -77,9 +77,9 @@
|
||||
}
|
||||
|
||||
.extra-combos-table td {
|
||||
padding: 0.4rem 0.75rem;
|
||||
padding: var(--space-1-5) var(--space-3);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 0.85rem;
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -100,11 +100,11 @@
|
||||
.extra-combos-delete-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
padding: 0 0.35rem;
|
||||
padding: 0 var(--space-1-5);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--fs-md);
|
||||
line-height: 1.4;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
@@ -122,8 +122,8 @@
|
||||
|
||||
.extra-combos-empty {
|
||||
text-align: center;
|
||||
padding: 1rem !important;
|
||||
padding: var(--space-4) !important;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
font-size: 0.85rem;
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
.header-content {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 16px 20px;
|
||||
padding: var(--space-4) var(--space-5);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -20,13 +20,13 @@
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.header-left h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-2xl);
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
@@ -36,7 +36,7 @@
|
||||
background: var(--header-chrome);
|
||||
border: 1px solid var(--header-chrome-border);
|
||||
color: var(--header-text);
|
||||
font-size: 20px;
|
||||
font-size: var(--fs-2xl);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
display: flex;
|
||||
@@ -79,7 +79,7 @@
|
||||
.nav-dropdown-menu button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
padding: var(--space-2-5) var(--space-4);
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
@@ -98,44 +98,44 @@
|
||||
|
||||
.nav-dropdown-menu strong {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
.nav-dropdown-menu span {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
margin-top: var(--space-0-5);
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-right: 10px;
|
||||
margin-right: var(--space-2-5);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-weight: var(--fw-semibold);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-sm);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -147,8 +147,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
font-weight: var(--fw-bold);
|
||||
font-size: var(--fs-lg);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
box-shadow: var(--shadow-card);
|
||||
@@ -160,13 +160,13 @@
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
padding: 8px 16px;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: var(--header-chrome);
|
||||
border: 1px solid var(--header-chrome-border);
|
||||
color: var(--header-text);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
@@ -178,12 +178,12 @@
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.header-left h1 {
|
||||
font-size: 18px;
|
||||
font-size: var(--fs-xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -206,7 +206,7 @@
|
||||
background: var(--header-chrome);
|
||||
border: 1px solid var(--header-chrome-border);
|
||||
color: var(--header-text);
|
||||
font-size: 17px;
|
||||
font-size: var(--fs-xl);
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
.history {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 20px;
|
||||
padding: var(--space-6) var(--space-5);
|
||||
}
|
||||
|
||||
.history-title {
|
||||
margin: 0 0 16px 0;
|
||||
margin: 0 0 var(--space-4) 0;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.history-error {
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 12px;
|
||||
padding: var(--space-2-5) var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
|
||||
.history-table-wrap {
|
||||
@@ -28,23 +28,23 @@
|
||||
.history-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.history-table th {
|
||||
text-align: left;
|
||||
padding: 10px 14px;
|
||||
padding: var(--space-2-5) var(--space-4);
|
||||
background: var(--surface-hover);
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.history-table td {
|
||||
padding: 10px 14px;
|
||||
padding: var(--space-2-5) var(--space-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
@@ -64,16 +64,16 @@
|
||||
.history-empty {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 32px !important;
|
||||
padding: var(--space-8) !important;
|
||||
}
|
||||
|
||||
.history-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
padding: var(--space-1) var(--space-2-5);
|
||||
border: 1px solid;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-semibold);
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -91,12 +91,12 @@
|
||||
}
|
||||
|
||||
.history-void-btn {
|
||||
padding: 4px 12px;
|
||||
padding: var(--space-1) var(--space-3);
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -108,35 +108,35 @@
|
||||
.history-void-inline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: var(--space-1-5);
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.history-void-inline input {
|
||||
padding: 6px 8px;
|
||||
padding: var(--space-1-5) var(--space-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-sm);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.history-void-error {
|
||||
color: var(--danger);
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-xs);
|
||||
}
|
||||
|
||||
.history-void-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
gap: var(--space-1-5);
|
||||
}
|
||||
|
||||
.history-void-actions button {
|
||||
padding: 4px 10px;
|
||||
padding: var(--space-1) var(--space-2-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface-hover);
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -144,19 +144,19 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
margin-top: 16px;
|
||||
gap: var(--space-1);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.history-pager button {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
padding: 0 var(--space-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -178,5 +178,5 @@
|
||||
|
||||
.history-page-gap {
|
||||
color: var(--text-muted);
|
||||
padding: 0 4px;
|
||||
padding: 0 var(--space-1);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
+119
-119
@@ -15,21 +15,21 @@
|
||||
}
|
||||
|
||||
.vehicle-list-header {
|
||||
padding: 12px;
|
||||
padding: var(--space-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.vehicle-add-btn {
|
||||
padding: 8px 16px;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: var(--accent-gradient);
|
||||
color: var(--accent-contrast);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
@@ -40,10 +40,10 @@
|
||||
}
|
||||
|
||||
.vehicle-search {
|
||||
padding: 7px 10px;
|
||||
padding: var(--space-2) var(--space-2-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
|
||||
.vehicle-search:focus {
|
||||
@@ -61,7 +61,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
padding: var(--space-2-5) var(--space-3);
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--surface-hover);
|
||||
transition: background 0.15s;
|
||||
@@ -77,21 +77,21 @@
|
||||
}
|
||||
|
||||
.vehicle-list-number {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-weight: var(--fw-semibold);
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.vehicle-list-weight {
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.vehicle-list-empty {
|
||||
padding: 20px;
|
||||
padding: var(--space-5);
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
|
||||
/* Right panel */
|
||||
@@ -107,22 +107,22 @@
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--text-muted);
|
||||
font-size: 16px;
|
||||
font-size: var(--fs-lg);
|
||||
}
|
||||
|
||||
/* No max-width: four readouts on one row do not fit in the old 700px cap. */
|
||||
.vehicle-detail {
|
||||
padding: 24px;
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
/* Also used standalone by the "New Vehicle" form heading, which has no icon,
|
||||
pills or photo - hence the margin/weight living here rather than only on
|
||||
.vehicle-heading. Inside .vehicle-hero the margin is overridden to 0. */
|
||||
.vehicle-detail-title {
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 18px;
|
||||
margin: 0 0 var(--space-5) 0;
|
||||
font-size: var(--fs-xl);
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
font-weight: var(--fw-bold);
|
||||
}
|
||||
|
||||
/* Header bar: icon, plate number, status pills, and (cockpit only) a photo
|
||||
@@ -133,10 +133,10 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
gap: var(--space-4);
|
||||
height: 108px;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 16px;
|
||||
margin-bottom: var(--space-5);
|
||||
padding: 0 var(--space-4);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
@@ -146,7 +146,7 @@
|
||||
.vehicle-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -158,7 +158,7 @@
|
||||
reading's look carries over here too. */
|
||||
.vehicle-heading .vehicle-detail-title {
|
||||
margin: 0;
|
||||
font-size: 40px;
|
||||
font-size: var(--fs-display);
|
||||
color: var(--reading);
|
||||
text-shadow: var(--reading-glow);
|
||||
}
|
||||
@@ -178,11 +178,11 @@
|
||||
|
||||
.vehicle-status {
|
||||
flex-shrink: 0;
|
||||
padding: 4px 10px;
|
||||
padding: var(--space-1) var(--space-2-5);
|
||||
border: 1px solid;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-semibold);
|
||||
letter-spacing: .03em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -212,11 +212,11 @@
|
||||
.vehicle-error {
|
||||
background-color: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
padding: 10px 14px;
|
||||
padding: var(--space-2-5) var(--space-4);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--danger);
|
||||
font-size: 13px;
|
||||
margin-bottom: 14px;
|
||||
font-size: var(--fs-base);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
/* Weighing cards. A fixed five-column grid - four readouts and an action
|
||||
@@ -227,8 +227,8 @@
|
||||
.weighing-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1.8fr 0.85fr 0.85fr 0.85fr 0.85fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-6);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
@@ -240,9 +240,9 @@
|
||||
.weight-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
gap: var(--space-2-5);
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
@@ -265,7 +265,7 @@
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: var(--space-1-5);
|
||||
}
|
||||
|
||||
.weight-card-reading-actions .weight-set-btn,
|
||||
@@ -282,7 +282,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
/* The buttons carry a stacking margin for when they sit inside a card; in this
|
||||
@@ -302,7 +302,7 @@
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
padding: 12px 0;
|
||||
padding: var(--space-3) 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -314,13 +314,13 @@
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
z-index: 1;
|
||||
padding: 2px 6px;
|
||||
padding: var(--space-0-5) var(--space-1-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: var(--surface-hover);
|
||||
color: var(--text-muted);
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-bold);
|
||||
letter-spacing: .04em;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
@@ -363,12 +363,12 @@
|
||||
}
|
||||
|
||||
.weight-card-header {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: var(--space-1-5);
|
||||
}
|
||||
|
||||
.weight-card--net .weight-card-header {
|
||||
@@ -376,11 +376,11 @@
|
||||
}
|
||||
|
||||
.weight-card-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
font-size: var(--fs-2xl);
|
||||
font-weight: var(--fw-bold);
|
||||
color: var(--text);
|
||||
margin-bottom: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
margin-bottom: var(--space-1);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.weight-card--net .weight-card-value {
|
||||
@@ -390,34 +390,34 @@
|
||||
/* The live reading is the instrument on this screen, so it is set larger than
|
||||
the recorded weights beside it. */
|
||||
.weight-card-value--reading {
|
||||
font-size: 40px;
|
||||
font-size: var(--fs-display);
|
||||
color: var(--reading);
|
||||
text-shadow: var(--reading-glow);
|
||||
}
|
||||
|
||||
.reading-value--disconnected {
|
||||
color: var(--border-strong);
|
||||
font-size: 18px;
|
||||
font-size: var(--fs-xl);
|
||||
}
|
||||
|
||||
.weight-card-meta {
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: var(--space-2-5);
|
||||
}
|
||||
|
||||
.weight-set-btn {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: var(--accent-gradient);
|
||||
color: var(--accent-contrast);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
margin-top: 6px;
|
||||
margin-top: var(--space-1-5);
|
||||
}
|
||||
|
||||
.weight-set-btn:hover:not(:disabled) {
|
||||
@@ -437,7 +437,7 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
margin-top: 6px;
|
||||
margin-top: var(--space-1-5);
|
||||
}
|
||||
|
||||
/* .weight-set-btn is width:100%; inside the split the halves are sized by flex. */
|
||||
@@ -453,7 +453,7 @@
|
||||
|
||||
.design-notice-caret {
|
||||
flex: 0 0 28px;
|
||||
padding: 8px 0;
|
||||
padding: var(--space-2) 0;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
@@ -481,12 +481,12 @@
|
||||
.design-notice-menu button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@@ -500,53 +500,53 @@
|
||||
|
||||
.design-notice-menu strong {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
.design-notice-menu span {
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Extra fields section */
|
||||
.extra-section {
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 20px;
|
||||
padding-top: var(--space-5);
|
||||
}
|
||||
|
||||
.extra-section h3 {
|
||||
margin: 0 0 14px 0;
|
||||
font-size: 14px;
|
||||
margin: 0 0 var(--space-4) 0;
|
||||
font-size: var(--fs-md);
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
.extra-fields {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.vehicle-new-fields {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1.6fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.extra-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.extra-field label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
@@ -558,10 +558,10 @@
|
||||
.extra-field input[type="text"],
|
||||
.extra-field input[type="number"],
|
||||
.extra-field select {
|
||||
padding: 7px 10px;
|
||||
padding: var(--space-2) var(--space-2-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-md);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
@@ -579,13 +579,13 @@
|
||||
}
|
||||
|
||||
.extra-save-btn {
|
||||
padding: 8px 20px;
|
||||
padding: var(--space-2) var(--space-5);
|
||||
background: var(--accent-gradient);
|
||||
color: var(--accent-contrast);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
@@ -602,26 +602,26 @@
|
||||
|
||||
/* Vehicle form sections */
|
||||
.vehicle-form-section {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.vehicle-form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: var(--space-2-5);
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
padding-top: 16px;
|
||||
margin-top: var(--space-5);
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.vehicle-form-cancel {
|
||||
padding: 8px 20px;
|
||||
padding: var(--space-2) var(--space-5);
|
||||
background: var(--surface);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
@@ -693,25 +693,25 @@
|
||||
}
|
||||
|
||||
.weight-manual-tag {
|
||||
margin-left: 6px;
|
||||
padding: 1px 5px;
|
||||
margin-left: var(--space-1-5);
|
||||
padding: 1px var(--space-1-5);
|
||||
border-radius: 3px;
|
||||
background-color: var(--warning-soft);
|
||||
color: var(--warning);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.weight-manual-btn {
|
||||
margin-top: 6px;
|
||||
padding: 4px 10px;
|
||||
margin-top: var(--space-1-5);
|
||||
padding: var(--space-1) var(--space-2-5);
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -737,26 +737,26 @@
|
||||
.manual-content {
|
||||
background: var(--surface);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
padding: var(--space-6);
|
||||
width: 340px;
|
||||
max-width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.manual-content h3 {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 16px;
|
||||
margin: 0 0 var(--space-4) 0;
|
||||
font-size: var(--fs-lg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.manual-field {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.manual-field label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--space-1);
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
@@ -764,18 +764,18 @@
|
||||
|
||||
.manual-field input {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
padding: var(--space-2) var(--space-2-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-md);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.manual-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.reading-value--balanced {
|
||||
@@ -787,15 +787,15 @@
|
||||
}
|
||||
|
||||
.reading-error {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
margin-top: var(--space-1);
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--danger);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.weight-license-block {
|
||||
margin-top: 6px;
|
||||
font-size: 11px;
|
||||
margin-top: var(--space-1-5);
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--danger);
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -957,7 +957,7 @@
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 34px; height: 34px;
|
||||
font-size: 15px;
|
||||
font-size: var(--fs-lg);
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
border: 1px solid var(--border-strong);
|
||||
@@ -982,7 +982,7 @@
|
||||
background: linear-gradient(180deg, #ff8a3c 0%, #e8631b 100%);
|
||||
border: 1px solid #ffa563;
|
||||
color: #1a0c02;
|
||||
font-weight: 700;
|
||||
font-weight: var(--fw-bold);
|
||||
letter-spacing: .06em;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--glow-warning);
|
||||
}
|
||||
@@ -997,7 +997,7 @@
|
||||
background: linear-gradient(180deg, var(--accent) 0%, #1f7fae 100%);
|
||||
border: 1px solid var(--accent-hover);
|
||||
color: var(--accent-contrast);
|
||||
font-weight: 700;
|
||||
font-weight: var(--fw-bold);
|
||||
letter-spacing: .05em;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--glow-accent);
|
||||
}
|
||||
@@ -1042,7 +1042,7 @@
|
||||
|
||||
/* Corner bracket on the data panel: an L drawn from two borders. */
|
||||
[data-theme="cockpit"] .extra-section {
|
||||
padding: 18px;
|
||||
padding: var(--space-5);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
[data-theme="cockpit"] .extra-section::after {
|
||||
@@ -1059,7 +1059,7 @@
|
||||
[data-theme="cockpit"] .extra-section h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
gap: var(--space-2-5);
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
[data-theme="cockpit"] .extra-section h3::before {
|
||||
@@ -1067,7 +1067,7 @@
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 24px; height: 24px;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
border: 1px solid var(--border-strong);
|
||||
@@ -1105,7 +1105,7 @@
|
||||
right: 10px;
|
||||
bottom: 30px;
|
||||
writing-mode: vertical-rl;
|
||||
font: 700 11px/1 system-ui, sans-serif;
|
||||
font: var(--fw-bold) var(--fs-xs)/1 var(--font-sans);
|
||||
letter-spacing: .42em;
|
||||
color: var(--text-muted);
|
||||
opacity: .38;
|
||||
@@ -1178,8 +1178,8 @@
|
||||
/* Labels: small, wide-tracked, cyan — the reference's instrument-panel voice. */
|
||||
[data-theme="cockpit"] .weight-card-header {
|
||||
color: var(--accent);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-bold);
|
||||
text-transform: uppercase;
|
||||
opacity: .92;
|
||||
}
|
||||
@@ -1222,7 +1222,7 @@
|
||||
[data-theme="cockpit"] .extra-combos-table th {
|
||||
background: rgba(0, 217, 255, .07);
|
||||
color: var(--accent);
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-xs);
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -1232,7 +1232,7 @@
|
||||
[data-theme="cockpit"] .extra-section h4 {
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 12px rgba(0, 217, 255, .35);
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
letter-spacing: .1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -1240,7 +1240,7 @@
|
||||
/* Field labels, quieter than the headings but still in voice. */
|
||||
[data-theme="cockpit"] .extra-field label {
|
||||
color: var(--text-muted);
|
||||
font-size: 10px;
|
||||
font-size: var(--fs-xs);
|
||||
letter-spacing: .1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
top: 0;
|
||||
width: 300px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
border-left: 1px solid #ccc;
|
||||
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
background: var(--surface);
|
||||
border-left: 1px solid var(--border-strong);
|
||||
box-shadow: var(--shadow-raised);
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
@@ -17,9 +17,9 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background: #f9f9f9;
|
||||
padding: var(--space-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface-sunken);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
@@ -27,41 +27,41 @@
|
||||
|
||||
.palette-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-size: var(--fs-lg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
font-size: var(--fs-2xl);
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
padding: 5px 10px;
|
||||
color: var(--text-muted);
|
||||
padding: var(--space-1-5) var(--space-2-5);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
color: #333;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: var(--text);
|
||||
background: var(--surface-hover);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.palette-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
padding: var(--space-2-5);
|
||||
}
|
||||
|
||||
.palette-category {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: var(--space-2-5);
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background: #f5f5f5;
|
||||
padding: var(--space-2-5);
|
||||
background: var(--surface-sunken);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
@@ -69,32 +69,32 @@
|
||||
}
|
||||
|
||||
.category-header:hover {
|
||||
background: #e8e8e8;
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.category-header.expanded {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
background: var(--accent);
|
||||
color: var(--accent-contrast);
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 12px;
|
||||
margin-right: var(--space-2);
|
||||
font-size: var(--fs-sm);
|
||||
width: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
font-weight: var(--fw-medium);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.character-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
|
||||
gap: 5px;
|
||||
padding: 10px;
|
||||
background: #fafafa;
|
||||
gap: var(--space-1-5);
|
||||
padding: var(--space-2-5);
|
||||
background: var(--surface-sunken);
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
@@ -104,27 +104,27 @@
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid #ddd;
|
||||
background: white;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
font-family: 'Courier New', 'Consolas', monospace;
|
||||
font-size: var(--fs-2xl);
|
||||
font-family: var(--font-mono);
|
||||
transition: all 0.2s;
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.char-button:hover {
|
||||
border-color: #667eea;
|
||||
background: #f0f0ff;
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.char-button.active {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
|
||||
background: var(--accent);
|
||||
color: var(--accent-contrast);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 2px 4px var(--accent-soft);
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
@@ -135,16 +135,16 @@
|
||||
|
||||
.character-palette::-webkit-scrollbar-track,
|
||||
.palette-content::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
background: var(--surface-sunken);
|
||||
}
|
||||
|
||||
.character-palette::-webkit-scrollbar-thumb,
|
||||
.palette-content::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
background: var(--border-strong);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.character-palette::-webkit-scrollbar-thumb:hover,
|
||||
.palette-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #a0a0a0;
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: var(--backdrop);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -12,38 +12,38 @@
|
||||
}
|
||||
|
||||
.config-panel {
|
||||
background: white;
|
||||
background: var(--surface);
|
||||
border-radius: 8px;
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-overlay);
|
||||
}
|
||||
|
||||
.config-panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: var(--space-5);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.config-panel-header h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-2xl);
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
color: var(--header-text);
|
||||
font-size: var(--fs-display);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
@@ -56,70 +56,70 @@
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--header-chrome);
|
||||
}
|
||||
|
||||
.config-panel-content {
|
||||
padding: 20px;
|
||||
padding: var(--space-5);
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.config-section {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.config-section h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.config-input {
|
||||
flex: 1;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-2-5) var(--space-3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: var(--fs-md);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.config-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.config-input:disabled {
|
||||
background: #f5f5f5;
|
||||
background: var(--surface-sunken);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.config-button {
|
||||
padding: 10px 16px;
|
||||
background: #f0f0f0;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-2-5) var(--space-4);
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.config-button:hover:not(:disabled) {
|
||||
background: #e0e0e0;
|
||||
background: var(--surface-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -129,8 +129,8 @@
|
||||
}
|
||||
|
||||
.config-button.primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
background: var(--accent-gradient);
|
||||
color: var(--accent-contrast);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@@ -139,65 +139,65 @@
|
||||
}
|
||||
|
||||
.config-button.small {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
padding: var(--space-1-5) var(--space-3);
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.config-error {
|
||||
margin-top: 8px;
|
||||
padding: 12px;
|
||||
background: #fee;
|
||||
border: 1px solid #fcc;
|
||||
margin-top: var(--space-2);
|
||||
padding: var(--space-3);
|
||||
background: var(--danger-soft);
|
||||
border: 1px solid var(--danger);
|
||||
border-radius: 6px;
|
||||
color: #c33;
|
||||
font-size: 14px;
|
||||
color: var(--danger);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.config-info {
|
||||
padding: 16px;
|
||||
background: #f0f8ff;
|
||||
border: 1px solid #d0e8ff;
|
||||
padding: var(--space-4);
|
||||
background: var(--accent-soft);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 6px;
|
||||
color: #0066cc;
|
||||
font-size: 14px;
|
||||
color: var(--accent);
|
||||
font-size: var(--fs-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.manual-input-section {
|
||||
margin-top: 12px;
|
||||
margin-top: var(--space-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.manual-data-input {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-2-5) var(--space-3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: var(--fs-md);
|
||||
font-family: var(--font-mono);
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.manual-data-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.data-preview {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #ddd;
|
||||
padding: var(--space-3);
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.data-preview pre {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: var(--fs-sm);
|
||||
font-family: var(--font-mono);
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
padding: var(--space-5);
|
||||
background: var(--surface-sunken);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
width: 1440px;
|
||||
height: 2112px;
|
||||
background: white;
|
||||
color: #000;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
font-family: 'Courier New', 'Consolas', monospace;
|
||||
@@ -58,8 +59,8 @@
|
||||
|
||||
.frame-preview {
|
||||
position: absolute;
|
||||
border: 2px dashed #667eea;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border: 2px dashed var(--accent);
|
||||
background: var(--accent-soft);
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -74,8 +75,8 @@
|
||||
|
||||
.selection-rectangle {
|
||||
position: absolute;
|
||||
border: 2px dashed #667eea;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border: 2px dashed var(--accent);
|
||||
background: var(--accent-soft);
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
z-index: 100;
|
||||
|
||||
@@ -4,93 +4,93 @@
|
||||
top: 0;
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
background: #f5f5f5;
|
||||
border-right: 1px solid #ddd;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
background: var(--surface-sunken);
|
||||
border-right: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-raised);
|
||||
overflow-y: auto;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--fs-base);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.inspector-header {
|
||||
background: #e0e0e0;
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #ccc;
|
||||
background: var(--surface-hover);
|
||||
padding: var(--space-2-5);
|
||||
font-weight: var(--fw-bold);
|
||||
border-bottom: 1px solid var(--border-strong);
|
||||
}
|
||||
|
||||
.inspector-empty {
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
padding: var(--space-5);
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inspector-section {
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: var(--space-2-5);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #555;
|
||||
font-weight: var(--fw-bold);
|
||||
margin-bottom: var(--space-2-5);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.property-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.property-row label {
|
||||
flex: 0 0 70px;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.property-row input,
|
||||
.property-row select {
|
||||
flex: 1;
|
||||
padding: 4px 6px;
|
||||
border: 1px solid #ccc;
|
||||
padding: var(--space-1) var(--space-1-5);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.property-row input:disabled {
|
||||
background: #e0e0e0;
|
||||
color: #999;
|
||||
background: var(--surface-hover);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.property-row select:disabled {
|
||||
background: #e0e0e0;
|
||||
color: #999;
|
||||
background: var(--surface-hover);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.property-row input:focus,
|
||||
.property-row select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.expr-btn-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
margin-bottom: 6px;
|
||||
gap: var(--space-1);
|
||||
margin-bottom: var(--space-1-5);
|
||||
}
|
||||
|
||||
.expr-btn-row button {
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
border: 1px solid #ccc;
|
||||
padding: var(--space-0-5) var(--space-1-5);
|
||||
font-size: var(--fs-xs);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.expr-btn-row button:hover {
|
||||
background: #e8eeff;
|
||||
border-color: #667eea;
|
||||
background: var(--accent-soft);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
@@ -176,11 +176,11 @@ function ObjectInspector({ element, onUpdate, allElements = [] }) {
|
||||
{parentBand ? (
|
||||
<>
|
||||
<div className="property-info" style={{
|
||||
fontSize: '11px',
|
||||
color: '#667eea',
|
||||
marginBottom: '8px',
|
||||
padding: '6px',
|
||||
background: 'rgba(102, 126, 234, 0.1)',
|
||||
fontSize: 'var(--fs-xs)',
|
||||
color: 'var(--accent)',
|
||||
marginBottom: 'var(--space-2)',
|
||||
padding: 'var(--space-1-5)',
|
||||
background: 'var(--accent-soft)',
|
||||
borderRadius: '3px'
|
||||
}}>
|
||||
{parentBand.parentBandId ? (
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: var(--backdrop);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -26,74 +26,74 @@
|
||||
}
|
||||
|
||||
.load-dialog {
|
||||
background: white;
|
||||
background: var(--surface);
|
||||
border-radius: 8px;
|
||||
width: 500px;
|
||||
max-width: 90vw;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: var(--shadow-overlay);
|
||||
}
|
||||
|
||||
.load-dialog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: var(--space-4) var(--space-5);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.load-dialog-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
font-size: var(--fs-xl);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.load-dialog-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
font-size: var(--fs-2xl);
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
color: var(--text-muted);
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.load-dialog-close:hover {
|
||||
color: #333;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.load-dialog-actions {
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: var(--space-3) var(--space-5);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.load-dialog-new-btn {
|
||||
padding: 8px 16px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: var(--accent);
|
||||
color: var(--accent-contrast);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.load-dialog-new-btn:hover {
|
||||
background: #5a6fd6;
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.load-dialog-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 0;
|
||||
padding: var(--space-3) 0;
|
||||
}
|
||||
|
||||
.load-dialog-loading,
|
||||
.load-dialog-empty {
|
||||
padding: 40px 20px;
|
||||
padding: var(--space-10) var(--space-5);
|
||||
text-align: center;
|
||||
color: #999;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.load-dialog-list {
|
||||
@@ -105,47 +105,47 @@
|
||||
.load-dialog-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: var(--space-3) var(--space-5);
|
||||
border-bottom: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.load-dialog-item:hover {
|
||||
background: #f8f8f8;
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.load-dialog-item--current {
|
||||
background: #e8f0ff;
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.load-dialog-item--current:hover {
|
||||
background: #dde8ff;
|
||||
background: color-mix(in srgb, var(--accent) 20%, transparent);
|
||||
}
|
||||
|
||||
.load-dialog-item-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.load-dialog-item-name {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-weight: var(--fw-medium);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.load-dialog-item-date {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.load-dialog-item-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
font-size: var(--fs-lg);
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
@@ -1,54 +1,54 @@
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
gap: 16px;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--header-bg);
|
||||
border-bottom: 2px solid color-mix(in srgb, var(--text) 10%, transparent);
|
||||
box-shadow: var(--shadow-raised);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.toolbar-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.toolbar-separator {
|
||||
width: 1px;
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: var(--header-chrome-border);
|
||||
}
|
||||
|
||||
.toolbar-label {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-right: 4px;
|
||||
color: var(--header-text);
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-medium);
|
||||
margin-right: var(--space-1);
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
padding: 8px 16px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: var(--header-chrome);
|
||||
border: 1px solid var(--header-chrome-border);
|
||||
color: var(--header-text);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-medium);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: var(--header-chrome-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.toolbar-button.active {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
background: color-mix(in srgb, var(--header-text) 40%, transparent);
|
||||
border-color: color-mix(in srgb, var(--header-text) 50%, transparent);
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
|
||||
.toolbar-button:disabled {
|
||||
@@ -62,21 +62,21 @@
|
||||
}
|
||||
|
||||
.toolbar-report-name {
|
||||
padding: 8px 12px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--header-chrome-border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-md);
|
||||
width: 200px;
|
||||
color: #333;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.toolbar-report-name::placeholder {
|
||||
color: #999;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.toolbar-report-name:focus {
|
||||
outline: none;
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
|
||||
border-color: color-mix(in srgb, var(--header-text) 60%, transparent);
|
||||
box-shadow: 0 0 0 2px var(--header-chrome);
|
||||
}
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
.a4-canvas-container {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background: #8a8a8a;
|
||||
padding: 24px;
|
||||
background: var(--desk);
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
@@ -13,6 +13,7 @@
|
||||
.a4-page {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
|
||||
flex: none;
|
||||
}
|
||||
@@ -102,8 +103,8 @@
|
||||
/* Rubber-band selection rectangle */
|
||||
.a4-selection-rectangle {
|
||||
position: absolute;
|
||||
border: 1px dashed #667eea;
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
border: 1px dashed var(--accent);
|
||||
background: var(--accent-soft);
|
||||
pointer-events: none;
|
||||
z-index: 15;
|
||||
}
|
||||
@@ -126,13 +127,13 @@
|
||||
|
||||
.a4-preview-page-break {
|
||||
width: 100%;
|
||||
padding: 6px 0 14px;
|
||||
padding: var(--space-1-5) 0 var(--space-4);
|
||||
text-align: center;
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: 11px;
|
||||
color: #e8e8e8;
|
||||
border-top: 1px dashed rgba(255, 255, 255, 0.4);
|
||||
margin-top: 14px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--desk-text);
|
||||
border-top: 1px dashed color-mix(in srgb, var(--desk-text) 40%, transparent);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.a4-preview-el {
|
||||
|
||||
@@ -2,36 +2,36 @@
|
||||
|
||||
.a4-inspector .mm-suffix {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 6px;
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
margin-left: var(--space-1-5);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-xs);
|
||||
}
|
||||
|
||||
.a4-inspector .a4-style-buttons {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.a4-inspector .a4-style-btn {
|
||||
flex: 1;
|
||||
padding: 4px 0;
|
||||
border: 1px solid #ccc;
|
||||
padding: var(--space-1) 0;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
background: var(--surface);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.a4-inspector .a4-style-btn:hover {
|
||||
background: #e8eeff;
|
||||
border-color: #667eea;
|
||||
background: var(--accent-soft);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.a4-inspector .a4-style-btn.active {
|
||||
background: #667eea;
|
||||
border-color: #667eea;
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent-contrast);
|
||||
}
|
||||
|
||||
.a4-inspector input[type="color"] {
|
||||
@@ -42,16 +42,16 @@
|
||||
.a4-inspector .a4-expression-input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
margin-bottom: var(--space-1);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--fs-xs);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.a4-inspector .inspector-hint {
|
||||
padding: 2px 0 6px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
padding: var(--space-0-5) 0 var(--space-1-5);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
.a4-kind-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: var(--backdrop);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -11,44 +11,44 @@
|
||||
}
|
||||
|
||||
.a4-kind-dialog {
|
||||
background: #fff;
|
||||
background: var(--surface);
|
||||
border-radius: 8px;
|
||||
width: 460px;
|
||||
max-width: 92vw;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-overlay);
|
||||
}
|
||||
|
||||
.a4-kind-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding: var(--space-4) var(--space-5);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.a4-kind-header h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-size: var(--fs-lg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.a4-kind-close {
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 22px;
|
||||
font-size: var(--fs-2xl);
|
||||
line-height: 1;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.a4-kind-close:hover {
|
||||
color: #333;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.a4-kind-options {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 18px;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.a4-kind-option {
|
||||
@@ -56,45 +56,45 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
padding: 16px;
|
||||
border: 1px solid #ddd;
|
||||
gap: var(--space-1-5);
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #fafafa;
|
||||
background: var(--surface-sunken);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.a4-kind-option:hover {
|
||||
border-color: #667eea;
|
||||
background: #f0f3ff;
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.a4-kind-option-icon {
|
||||
font-size: 22px;
|
||||
font-size: var(--fs-2xl);
|
||||
}
|
||||
|
||||
.a4-kind-option-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.a4-kind-option-desc {
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.45;
|
||||
color: #777;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Cross-kind group in the load dialog — dimmed, because these are reports the
|
||||
current editor cannot open; clicking one navigates to the other editor. */
|
||||
.load-dialog-group-title {
|
||||
padding: 10px 4px 4px;
|
||||
font-size: 11px;
|
||||
padding: var(--space-2-5) var(--space-1) var(--space-1);
|
||||
font-size: var(--fs-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: #999;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.load-dialog-item--other {
|
||||
@@ -106,12 +106,12 @@
|
||||
}
|
||||
|
||||
.load-dialog-kind-badge {
|
||||
margin-left: 8px;
|
||||
padding: 1px 6px;
|
||||
margin-left: var(--space-2);
|
||||
padding: 1px var(--space-1-5);
|
||||
border-radius: 9px;
|
||||
background: #e8e8e8;
|
||||
color: #666;
|
||||
font-size: 10px;
|
||||
background: var(--surface-hover);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
.a4-page-setup-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: var(--backdrop);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -12,55 +12,55 @@
|
||||
}
|
||||
|
||||
.a4-page-setup {
|
||||
background: #fff;
|
||||
background: var(--surface);
|
||||
border-radius: 8px;
|
||||
width: 340px;
|
||||
max-height: 85vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow-overlay);
|
||||
}
|
||||
|
||||
.a4-page-setup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding: var(--space-4) var(--space-5);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.a4-page-setup-header h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-size: var(--fs-lg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.a4-page-setup-close {
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 22px;
|
||||
font-size: var(--fs-2xl);
|
||||
line-height: 1;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.a4-page-setup-close:hover {
|
||||
color: #333;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.a4-page-setup-body {
|
||||
padding: 8px 18px 18px;
|
||||
padding: var(--space-2) var(--space-5) var(--space-5);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.a4-page-setup-dims,
|
||||
.a4-page-setup-hint {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin-top: 6px;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--text-muted);
|
||||
margin-top: var(--space-1-5);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.a4-page-setup-dims {
|
||||
color: #667eea;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
@@ -6,16 +6,16 @@
|
||||
}
|
||||
|
||||
.toolbar-zoom {
|
||||
padding: 8px 10px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: var(--space-2) var(--space-2-5);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--header-chrome-border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-zoom:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 0 0 2px var(--header-chrome);
|
||||
}
|
||||
|
||||
@@ -36,6 +36,7 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
page-break-after: always;
|
||||
break-after: page;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
@@ -23,24 +23,24 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
padding: var(--space-2-5) var(--space-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.report-preview-switcher {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.report-preview-switch-btn {
|
||||
padding: 6px 14px;
|
||||
padding: var(--space-1-5) var(--space-4);
|
||||
background: var(--surface-hover);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -61,13 +61,13 @@
|
||||
}
|
||||
|
||||
.report-preview-download-btn {
|
||||
padding: 6px 14px;
|
||||
padding: var(--space-1-5) var(--space-4);
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -84,38 +84,38 @@
|
||||
.report-preview-body {
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
padding: var(--space-2);
|
||||
background: var(--surface-sunken);
|
||||
}
|
||||
|
||||
.report-preview-error {
|
||||
padding: 24px;
|
||||
padding: var(--space-6);
|
||||
color: var(--danger);
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.report-preview-loading {
|
||||
padding: 24px;
|
||||
padding: var(--space-6);
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.report-preview-empty {
|
||||
padding: 40px 24px;
|
||||
padding: var(--space-10) var(--space-6);
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.report-preview-design-btn {
|
||||
margin-top: 12px;
|
||||
padding: 8px 16px;
|
||||
margin-top: var(--space-3);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--accent-contrast);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -133,20 +133,20 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-top: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.report-preview-print-btn {
|
||||
padding: 8px 24px;
|
||||
padding: var(--space-2) var(--space-6);
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--accent-contrast);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -156,13 +156,13 @@
|
||||
}
|
||||
|
||||
.report-preview-close-btn {
|
||||
padding: 8px 24px;
|
||||
padding: var(--space-2) var(--space-6);
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
}
|
||||
|
||||
.sm-body {
|
||||
padding: 20px;
|
||||
padding: var(--space-5);
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -12,19 +12,19 @@
|
||||
.sm-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sm-back {
|
||||
padding: 6px 12px;
|
||||
padding: var(--space-1-5) var(--space-3);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
|
||||
.sm-back:hover {
|
||||
@@ -33,9 +33,9 @@
|
||||
}
|
||||
|
||||
.sm-conn {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 3px 8px;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-semibold);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
@@ -52,25 +52,25 @@
|
||||
}
|
||||
|
||||
.sm-status {
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-muted);
|
||||
font-family: 'Courier New', monospace;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.sm-message {
|
||||
padding: 8px 12px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background-color: var(--accent-soft);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
font-size: var(--fs-base);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.sm-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
@@ -82,25 +82,25 @@
|
||||
.sm-panel {
|
||||
background: var(--surface);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
padding: var(--space-4);
|
||||
box-shadow: 0 1px 3px var(--shadow-card);
|
||||
}
|
||||
|
||||
.sm-panel--wide {
|
||||
margin-top: 16px;
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.sm-panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.sm-panel-head h3 {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
@@ -108,16 +108,16 @@
|
||||
|
||||
.sm-panel-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
gap: var(--space-1-5);
|
||||
}
|
||||
|
||||
.sm-panel-actions button {
|
||||
padding: 4px 10px;
|
||||
padding: var(--space-1) var(--space-2-5);
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -128,26 +128,26 @@
|
||||
|
||||
.sm-send {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 10px;
|
||||
gap: var(--space-1-5);
|
||||
margin-bottom: var(--space-2-5);
|
||||
}
|
||||
|
||||
.sm-send input {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
padding: var(--space-1-5) var(--space-2-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: var(--fs-base);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.sm-send button {
|
||||
padding: 6px 14px;
|
||||
padding: var(--space-1-5) var(--space-4);
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent));
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--accent-contrast);
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -165,11 +165,11 @@
|
||||
}
|
||||
|
||||
.sm-line {
|
||||
padding: 5px 8px;
|
||||
padding: var(--space-1-5) var(--space-2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.sm-line:hover {
|
||||
@@ -183,7 +183,7 @@
|
||||
.sm-line-text {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@@ -199,37 +199,37 @@
|
||||
|
||||
.sm-line-hex {
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-xs);
|
||||
word-break: break-all;
|
||||
margin-top: 2px;
|
||||
margin-top: var(--space-0-5);
|
||||
}
|
||||
|
||||
.sm-empty {
|
||||
padding: 20px;
|
||||
padding: var(--space-5);
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
|
||||
.sm-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
gap: var(--space-2-5);
|
||||
}
|
||||
|
||||
.sm-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
gap: var(--space-2-5);
|
||||
}
|
||||
|
||||
.sm-form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
gap: var(--space-1);
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
@@ -237,43 +237,43 @@
|
||||
|
||||
.sm-form input[type="text"],
|
||||
.sm-form input[type="number"] {
|
||||
padding: 7px 10px;
|
||||
padding: var(--space-2) var(--space-2-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-md);
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
font-weight: 400;
|
||||
font-weight: var(--fw-regular);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.sm-check {
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: var(--space-1-5);
|
||||
text-transform: none !important;
|
||||
letter-spacing: normal !important;
|
||||
font-weight: 400 !important;
|
||||
font-weight: var(--fw-regular) !important;
|
||||
color: var(--text) !important;
|
||||
font-size: 12px !important;
|
||||
font-size: var(--fs-sm) !important;
|
||||
}
|
||||
|
||||
.sm-hint {
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sm-preview {
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
margin-top: var(--space-4);
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sm-preview h4 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 var(--space-2) 0;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
@@ -282,43 +282,43 @@
|
||||
.sm-preview-ok {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
gap: var(--space-2-5);
|
||||
}
|
||||
|
||||
.sm-preview-weight {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: var(--fs-2xl);
|
||||
font-weight: var(--fw-bold);
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.sm-bal {
|
||||
color: var(--success);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
.sm-unbal {
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
.sm-preview-error {
|
||||
color: var(--danger);
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sm-save {
|
||||
margin-top: 12px;
|
||||
padding: 8px 16px;
|
||||
margin-top: var(--space-3);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent));
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--accent-contrast);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-base);
|
||||
font-weight: var(--fw-semibold);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -330,18 +330,18 @@
|
||||
.sm-protocols {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: var(--space-1-5);
|
||||
}
|
||||
|
||||
.sm-protocol {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
gap: var(--space-2-5);
|
||||
padding: var(--space-2) var(--space-2-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
|
||||
.sm-protocol:hover {
|
||||
@@ -349,15 +349,15 @@
|
||||
}
|
||||
|
||||
.sm-protocol-name {
|
||||
font-weight: 600;
|
||||
font-weight: var(--fw-semibold);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.sm-protocol-kind,
|
||||
.sm-protocol-poll {
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--text-muted);
|
||||
font-family: 'Courier New', monospace;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.sm-protocol-poll {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: var(--bg);
|
||||
@@ -12,8 +10,7 @@ body {
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
* {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/**
|
||||
* Design tokens — the single place every colour, radius and shadow is defined.
|
||||
* Design tokens — the single place every colour, radius, shadow, font size
|
||||
* and spacing step is defined.
|
||||
*
|
||||
* Two themes today: `classic` (the app's original light look) and `cockpit`
|
||||
* (dark, derived from the weigh-station reference image). A third theme is one
|
||||
@@ -64,6 +65,13 @@
|
||||
--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 desk the A4 designer's white page sits on, and the page-break label
|
||||
drawn on it. Mid-grey, as in a word processor, so the page edge reads. */
|
||||
--desk: #8a8a8a;
|
||||
--desk-text: #e8e8e8;
|
||||
|
||||
/* The header is its own surface: a saturated bar with white chrome on it,
|
||||
so it cannot borrow --surface/--text without losing that contrast. */
|
||||
@@ -127,6 +135,13 @@
|
||||
--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);
|
||||
|
||||
/* Darker than --bg so the white page is the brightest thing on screen */
|
||||
--desk: #01070d;
|
||||
--desk-text: #6e9caf;
|
||||
|
||||
--header-bg: linear-gradient(180deg, #0a2336 0%, #04121e 100%);
|
||||
--header-text: #d9f6ff;
|
||||
@@ -152,6 +167,45 @@
|
||||
--hazard: repeating-linear-gradient(-45deg, var(--warning) 0 7px, transparent 7px 15px);
|
||||
}
|
||||
|
||||
/* Type and spacing are shared by every theme, so they live in a plain :root
|
||||
block rather than being repeated per theme. A theme that wants a different
|
||||
value (say a larger --fs-display for cockpit) overrides just that token in
|
||||
its own block, whose attribute selector outranks this one. */
|
||||
:root {
|
||||
/* Type */
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: 'Courier New', Consolas, monospace;
|
||||
|
||||
--fs-xs: 11px;
|
||||
--fs-sm: 12px;
|
||||
--fs-base: 13px;
|
||||
--fs-md: 14px;
|
||||
--fs-lg: 16px;
|
||||
--fs-xl: 18px;
|
||||
--fs-2xl: 22px;
|
||||
--fs-3xl: 28px;
|
||||
--fs-display: 32px; /* big figures: the weight reading etc. */
|
||||
|
||||
--fw-regular: 400;
|
||||
--fw-medium: 500;
|
||||
--fw-semibold: 600;
|
||||
--fw-bold: 700;
|
||||
|
||||
/* Spacing — a 4px grid plus the half-steps (6, 10) this UI leans on too
|
||||
often to snap away. Off-scale values snap to the nearest step. */
|
||||
--space-0-5: 2px;
|
||||
--space-1: 4px;
|
||||
--space-1-5: 6px;
|
||||
--space-2: 8px;
|
||||
--space-2-5: 10px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
}
|
||||
|
||||
/* Native form controls and scrollbars follow the theme, so a dark theme does
|
||||
not get a white dropdown or a light scrollbar track. */
|
||||
:root[data-theme="cockpit"] {
|
||||
|
||||
Reference in New Issue
Block a user