v0.1.21 - Mix calculator composer restyle
Mirror the throughput composer's green design language on the mix calculator inputs: brand-tinted composer surface with a calculator-icon header, green 48px fields, Mix Name disabled until a client is chosen, a darker readable on-brand hint, and optional notes via the "+ Add a note" reveal. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hunter-app",
|
||||
"version": "0.1.20",
|
||||
"version": "0.1.21",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy } from 'svelte';
|
||||
import { Calculator, Info, TriangleAlert, X } from 'lucide-svelte';
|
||||
import { api } from '$lib/api';
|
||||
import { featureFlags } from '$lib/features';
|
||||
import { formatNumber } from '$lib/format';
|
||||
@@ -51,6 +52,9 @@
|
||||
let batchSizeKg = $state(initialBatchSizeValue());
|
||||
let preparedByName = $state(initialPreparedByNameValue());
|
||||
let notes = $state(initialNotesValue());
|
||||
// Notes are optional and stay hidden behind "+ Add a note" until needed,
|
||||
// matching the throughput composer. Auto-open when a saved session has one.
|
||||
let showNote = $state(Boolean(initialSession?.notes));
|
||||
let preview = $state<MixCalculatorPreview | MixCalculatorSession | null>(initialPreviewValue());
|
||||
let formError = $state('');
|
||||
let formHint = $state('Select a mix date and prepared by name, then choose a client to unlock mixes.');
|
||||
@@ -158,6 +162,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Collapse the note field again, discarding anything typed.
|
||||
function dismissNote() {
|
||||
notes = '';
|
||||
showNote = false;
|
||||
}
|
||||
|
||||
function clearForm() {
|
||||
clientName = '';
|
||||
productId = 0;
|
||||
@@ -165,6 +175,7 @@
|
||||
batchSizeKg = '';
|
||||
preparedByName = $clientSession?.name ?? '';
|
||||
notes = '';
|
||||
showNote = false;
|
||||
preview = null;
|
||||
formError = '';
|
||||
formHint = 'Select a mix date and prepared by name, then choose a client to unlock mixes.';
|
||||
@@ -287,11 +298,11 @@
|
||||
{/if}
|
||||
|
||||
<section class="editor-grid">
|
||||
<article class="form-card">
|
||||
<div class="section-header">
|
||||
<div>
|
||||
<h3>Session Inputs</h3>
|
||||
<p>Batch size drives the scale factor. Total bags are derived from the selected mix unit size.</p>
|
||||
<article class="composer">
|
||||
<div class="composer-head">
|
||||
<div class="composer-title">
|
||||
<span class="composer-icon"><Calculator size={18} strokeWidth={2.2} /></span>
|
||||
<h2>Mix calculator</h2>
|
||||
</div>
|
||||
{#if selectedProduct}
|
||||
<div class="product-pill">
|
||||
@@ -301,12 +312,13 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="composer-body">
|
||||
{#if formError}
|
||||
<p class="message error">{formError}</p>
|
||||
<p class="message error"><TriangleAlert size={16} strokeWidth={2.2} /> <span>{formError}</span></p>
|
||||
{/if}
|
||||
|
||||
{#if !formError && formHint}
|
||||
<p class="message hint">{formHint}</p>
|
||||
<p class="message hint"><Info size={16} strokeWidth={2.2} /> <span>{formHint}</span></p>
|
||||
{/if}
|
||||
|
||||
<div class="field-grid">
|
||||
@@ -350,11 +362,27 @@
|
||||
<span>Batch size (kg)</span>
|
||||
<input bind:value={batchSizeKg} disabled={!canEdit} inputmode="decimal" min="0" placeholder="Batch size" type="number" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="full-width">
|
||||
<span>Notes</span>
|
||||
<textarea bind:value={notes} disabled={!canEdit} placeholder="Optional production notes or shift context" rows="4"></textarea>
|
||||
</label>
|
||||
<div class="note-area">
|
||||
{#if showNote}
|
||||
<div class="note-field">
|
||||
<textarea
|
||||
class="note-input"
|
||||
bind:value={notes}
|
||||
disabled={!canEdit}
|
||||
placeholder="Note (optional) — production notes or shift context"
|
||||
rows="3"
|
||||
></textarea>
|
||||
{#if canEdit}
|
||||
<button type="button" class="note-dismiss" title="Remove note" aria-label="Remove note" onclick={dismissNote}>
|
||||
<X size={16} strokeWidth={2.4} />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if canEdit}
|
||||
<button type="button" class="link-button" onclick={() => (showNote = true)}>+ Add a note</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if canEdit && selectedProduct}
|
||||
@@ -371,12 +399,13 @@
|
||||
<span>{previewLoading ? 'Calculating...' : 'Calculate mix'}</span>
|
||||
</button>
|
||||
|
||||
<button class="danger-button" disabled={previewLoading} type="button" onclick={clearForm}>
|
||||
<button class="secondary-button" disabled={previewLoading} type="button" onclick={clearForm}>
|
||||
<span class="button-icon" style="--button-icon-url: url('/icons/trash.svg');" aria-hidden="true"></span>
|
||||
<span>Clear</span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<MixCalculatorResultsPanel
|
||||
@@ -400,13 +429,12 @@
|
||||
|
||||
<style>
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: #7d8d84;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
@@ -425,9 +453,8 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.section-header p,
|
||||
.calculation-note span {
|
||||
color: var(--muted);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.action-row {
|
||||
@@ -443,21 +470,68 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-card,
|
||||
.locked-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow);
|
||||
/* The composer mirrors the throughput "Add a packing run" surface: a quiet
|
||||
brand-tinted gradient panel that reads as a distinct, on-brand workspace.
|
||||
Theme tokens keep it correct in dark mode. */
|
||||
.composer {
|
||||
border: 1px solid color-mix(in srgb, var(--color-brand) 16%, var(--color-border));
|
||||
border-radius: 0.9rem;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--color-brand) 7%, var(--color-bg-surface)),
|
||||
color-mix(in srgb, var(--color-brand) 4%, var(--color-bg-surface))
|
||||
);
|
||||
/* Native selects open within the viewport, so the card can stay open for
|
||||
a clean rounded edge without clipping anything. */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.form-card,
|
||||
.locked-card {
|
||||
padding: 1.2rem;
|
||||
.composer-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem 1.4rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 1.3rem 1.45rem 1.05rem;
|
||||
}
|
||||
|
||||
.composer-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
/* Brand-tinted badge echoing the throughput overview's section icon. */
|
||||
.composer-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
background: var(--color-brand-tint);
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
.composer-title h2 {
|
||||
margin: 0;
|
||||
font-size: clamp(1.25rem, 2vw, 1.7rem);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.composer-body {
|
||||
padding: 0 1.45rem 1.4rem;
|
||||
}
|
||||
|
||||
.locked-card {
|
||||
max-width: 42rem;
|
||||
padding: 1.2rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-panel);
|
||||
background: var(--color-bg-surface);
|
||||
}
|
||||
|
||||
.locked-card h2 {
|
||||
@@ -465,33 +539,28 @@
|
||||
font-size: clamp(1.7rem, 3vw, 2.1rem);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-header h3 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Quick brand-tinted chip echoing the selected mix's unit, matching the pill
|
||||
language used across the app. */
|
||||
.product-pill {
|
||||
display: grid;
|
||||
gap: 0.14rem;
|
||||
padding: 0.72rem 0.82rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.65rem;
|
||||
background: var(--panel-soft);
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.4rem;
|
||||
padding: 0.4rem 0.78rem;
|
||||
border: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--color-border));
|
||||
border-radius: 999px;
|
||||
background: var(--color-brand-tint);
|
||||
color: var(--color-success-text);
|
||||
}
|
||||
|
||||
.product-pill strong {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.product-pill span {
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
font-size: 0.76rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.field-grid {
|
||||
@@ -510,67 +579,155 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
grid-column: 1 / -1;
|
||||
/* Optional note, revealed by "+ Add a note" — mirrors the throughput composer. */
|
||||
.note-area {
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
.link-button {
|
||||
padding: 0.25rem 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--color-brand);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link-button:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.note-field {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.note-input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.note-dismiss {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
|
||||
border-radius: 0.8rem;
|
||||
background: var(--color-bg-surface);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 140ms ease,
|
||||
color 140ms ease,
|
||||
background-color 140ms ease;
|
||||
}
|
||||
|
||||
.note-dismiss:hover {
|
||||
border-color: var(--color-text-muted);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-bg-app);
|
||||
}
|
||||
|
||||
.note-dismiss:focus-visible {
|
||||
outline: 3px solid var(--color-brand);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* White fields on the green tint, with brand-tinted borders and a 48px touch
|
||||
target — the same input language as the throughput composer. */
|
||||
.composer input,
|
||||
.composer select,
|
||||
.composer textarea {
|
||||
width: 100%;
|
||||
padding: 0.78rem 0.82rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 0.6rem;
|
||||
background: var(--color-input-bg);
|
||||
color: var(--text);
|
||||
min-height: 48px;
|
||||
padding: 0.62rem 0.78rem;
|
||||
border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
|
||||
border-radius: 0.8rem;
|
||||
font-size: 0.98rem;
|
||||
background: var(--color-bg-surface);
|
||||
color: var(--color-text-primary);
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
.composer input::placeholder,
|
||||
.composer textarea::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible {
|
||||
outline: none;
|
||||
.composer input:focus-visible,
|
||||
.composer select:focus-visible,
|
||||
.composer textarea:focus-visible {
|
||||
outline: 3px solid var(--color-brand);
|
||||
outline-offset: 1px;
|
||||
border-color: var(--color-brand);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
|
||||
}
|
||||
|
||||
textarea {
|
||||
.composer textarea {
|
||||
min-height: 6.5rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* The Mix Name select stays locked until a client is chosen; make that state
|
||||
unmistakable rather than looking like an empty, clickable field. */
|
||||
.composer input:disabled,
|
||||
.composer select:disabled,
|
||||
.composer textarea:disabled {
|
||||
background: color-mix(in srgb, var(--color-bg-app) 70%, var(--color-bg-surface));
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.calculation-note {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
margin-top: 1rem;
|
||||
padding: 0.92rem;
|
||||
border-radius: 0.65rem;
|
||||
background: var(--panel-soft);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-row);
|
||||
background: var(--color-bg-app);
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
margin-bottom: 0.85rem;
|
||||
padding: 0.75rem 0.85rem;
|
||||
border-radius: 0.6rem;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.72rem 0.9rem;
|
||||
border-radius: 0.7rem;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.message :global(svg) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message.error {
|
||||
background: #fff1f0;
|
||||
color: #b2463f;
|
||||
background: color-mix(in srgb, var(--color-error) 12%, var(--color-bg-surface));
|
||||
color: var(--color-error);
|
||||
border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
|
||||
}
|
||||
|
||||
/* Readable on-brand hint: a white-ish surface with a green info icon, instead
|
||||
of low-contrast grey that washed out against the composer's tint. */
|
||||
.message.hint {
|
||||
background: var(--panel-soft);
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--line);
|
||||
background: color-mix(in srgb, var(--color-brand) 16%, var(--color-bg-app));
|
||||
color: var(--color-text-primary);
|
||||
border: 1px solid color-mix(in srgb, var(--color-brand) 26%, var(--color-border));
|
||||
}
|
||||
|
||||
.message.hint :global(svg) {
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
.action-row {
|
||||
@@ -578,15 +735,14 @@
|
||||
}
|
||||
|
||||
.primary-button,
|
||||
.secondary-button,
|
||||
.danger-button {
|
||||
.secondary-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.78rem 0.96rem;
|
||||
border-radius: 0.6rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-control);
|
||||
border: 1px solid var(--color-border);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
@@ -597,26 +753,29 @@
|
||||
.primary-button {
|
||||
border: none;
|
||||
background: var(--color-brand);
|
||||
color: #fff;
|
||||
color: var(--color-on-brand);
|
||||
}
|
||||
|
||||
/* Composer buttons take the throughput composer's chunkier 48px shape. */
|
||||
.composer .action-row .primary-button,
|
||||
.composer .action-row .secondary-button {
|
||||
min-height: 48px;
|
||||
padding: 0.62rem 1.28rem;
|
||||
border-radius: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background: #fff;
|
||||
color: #304038;
|
||||
}
|
||||
|
||||
.danger-button {
|
||||
background: #c63d32;
|
||||
color: #fff;
|
||||
border-color: #c63d32;
|
||||
background: var(--color-bg-surface);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.primary-button:hover:not(:disabled) {
|
||||
background: #126a33;
|
||||
background: var(--color-brand-hover);
|
||||
}
|
||||
|
||||
.primary-button:active:not(:disabled) {
|
||||
background: #0f5a2b;
|
||||
background: var(--color-brand-hover);
|
||||
}
|
||||
|
||||
.secondary-button:hover:not(:disabled) {
|
||||
@@ -624,14 +783,8 @@
|
||||
background: var(--color-bg-app);
|
||||
}
|
||||
|
||||
.danger-button:hover:not(:disabled) {
|
||||
background: #b2352b;
|
||||
border-color: #b2352b;
|
||||
}
|
||||
|
||||
.primary-button:focus-visible,
|
||||
.secondary-button:focus-visible,
|
||||
.danger-button:focus-visible {
|
||||
.secondary-button:focus-visible {
|
||||
outline: 3px solid color-mix(in srgb, var(--color-brand) 45%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@@ -658,10 +811,6 @@
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.field-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@@ -49,18 +49,14 @@
|
||||
</script>
|
||||
|
||||
<article class="result-card">
|
||||
<div class="section-header">
|
||||
<div>
|
||||
<h3>Calculated Output</h3>
|
||||
<p>{preview ? 'Snapshot of the scaled raw material requirements.' : 'Run the calculation to preview the session output.'}</p>
|
||||
</div>
|
||||
{#if sessionNumber}
|
||||
{#if sessionNumber}
|
||||
<div class="result-toolbar">
|
||||
<div class="session-chip">
|
||||
<span>Session</span>
|
||||
<strong>{sessionNumber}</strong>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if preview}
|
||||
<div class="metric-row">
|
||||
@@ -186,55 +182,50 @@
|
||||
</article>
|
||||
|
||||
<style>
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-header p,
|
||||
.metric-card p,
|
||||
.summary-grid span,
|
||||
.empty-state span {
|
||||
color: var(--muted);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.result-card,
|
||||
.metric-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-surface);
|
||||
}
|
||||
|
||||
.result-card {
|
||||
padding: 1.2rem;
|
||||
border-radius: var(--radius-panel);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
.metric-card {
|
||||
border-radius: var(--radius-row);
|
||||
}
|
||||
|
||||
.result-toolbar {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-header h3 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.session-chip {
|
||||
display: grid;
|
||||
gap: 0.14rem;
|
||||
padding: 0.72rem 0.82rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.65rem;
|
||||
background: var(--panel-soft);
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.4rem;
|
||||
padding: 0.4rem 0.78rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 999px;
|
||||
background: var(--color-bg-app);
|
||||
}
|
||||
|
||||
.session-chip span {
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.76rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
@@ -256,7 +247,7 @@
|
||||
|
||||
.metric-card span {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
@@ -271,9 +262,10 @@
|
||||
gap: 0.45rem;
|
||||
margin-top: 1rem;
|
||||
padding: 0.92rem;
|
||||
border-radius: 0.65rem;
|
||||
background: #fdf6e9;
|
||||
color: #8a5a00;
|
||||
border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
|
||||
border-radius: var(--radius-row);
|
||||
background: var(--color-warning-tint);
|
||||
color: var(--color-warning-text);
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
@@ -283,9 +275,9 @@
|
||||
|
||||
.summary-grid div {
|
||||
padding: 0.88rem 0.92rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.65rem;
|
||||
background: var(--panel-soft);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-row);
|
||||
background: var(--color-bg-app);
|
||||
}
|
||||
|
||||
.summary-grid span {
|
||||
@@ -318,11 +310,11 @@
|
||||
td {
|
||||
padding: 0.9rem 0.85rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--muted);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
@@ -352,7 +344,7 @@
|
||||
|
||||
.sort-head:hover,
|
||||
.sort-head.active {
|
||||
color: var(--text);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.sort-head.active :global(svg) {
|
||||
@@ -372,8 +364,8 @@
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.78rem 0.96rem;
|
||||
border-radius: 0.6rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-control);
|
||||
border: 1px solid var(--color-border);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
@@ -384,20 +376,20 @@
|
||||
.primary-button {
|
||||
border: none;
|
||||
background: var(--color-brand);
|
||||
color: #fff;
|
||||
color: var(--color-on-brand);
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background: #fff;
|
||||
color: #304038;
|
||||
background: var(--color-bg-surface);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.primary-button:hover:not(:disabled) {
|
||||
background: #126a33;
|
||||
background: var(--color-brand-hover);
|
||||
}
|
||||
|
||||
.primary-button:active:not(:disabled) {
|
||||
background: #0f5a2b;
|
||||
background: var(--color-brand-hover);
|
||||
}
|
||||
|
||||
.secondary-button:hover:not(:disabled) {
|
||||
@@ -422,7 +414,7 @@
|
||||
gap: 0;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.empty-shimmer-metrics {
|
||||
@@ -430,8 +422,8 @@
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--panel-soft);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--color-bg-app);
|
||||
}
|
||||
|
||||
.shimmer-metric {
|
||||
@@ -439,9 +431,9 @@
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.85rem;
|
||||
border: 1px solid var(--line);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.85rem;
|
||||
background: var(--panel);
|
||||
background: var(--color-bg-surface);
|
||||
}
|
||||
|
||||
.empty-state-copy {
|
||||
@@ -451,14 +443,14 @@
|
||||
gap: 0.5rem;
|
||||
padding: 2rem 1.5rem;
|
||||
text-align: center;
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--color-bg-surface);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.empty-state-copy strong {
|
||||
font-size: 0.98rem;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.empty-state-copy span {
|
||||
@@ -494,7 +486,7 @@
|
||||
.empty-shimmer-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--panel-soft);
|
||||
background: var(--color-bg-app);
|
||||
}
|
||||
|
||||
.shimmer-row {
|
||||
@@ -503,7 +495,7 @@
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
padding: 0.78rem 1rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.shimmer-row:last-child {
|
||||
@@ -516,7 +508,7 @@
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--color-border) 25%,
|
||||
color-mix(in srgb, var(--color-border) 40%, white) 50%,
|
||||
color-mix(in srgb, var(--color-border) 45%, var(--color-bg-surface)) 50%,
|
||||
var(--color-border) 75%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
@@ -539,10 +531,6 @@
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -566,14 +554,14 @@
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border: 1px solid var(--line);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 1rem;
|
||||
background: var(--panel-soft);
|
||||
background: var(--color-bg-app);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
border-bottom: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
tbody td:last-child {
|
||||
@@ -584,7 +572,7 @@
|
||||
content: attr(data-label);
|
||||
display: block;
|
||||
margin-bottom: 0.24rem;
|
||||
color: var(--muted);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
|
||||
Reference in New Issue
Block a user