Adriano/TieMeasureFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ecf700eadf6822adb34187c9c7a9c58d0456052d
TieMeasureFlow/client/static/css/themes.css
T
Adriano e8b88d48c1 feat: measurement workflow improvements and recipe update-in-place 
- Auto-advance to next task after completing all subtask measurements
- 1s pause between measurements to show pass/fail/warning result
- Colored marker strip (green/red/amber) based on measurement status
- Replace duplicate measurements instead of appending (fixes progress bar)
- Add Task column and Date/Time column to measurement summary table
- Enrich summary with task_info for each measurement
- Update-in-place for recipe versions without measurements (no copy-on-write)
- Dark theme improvements and navbar cleanup
- Server config: ignore extra env vars

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 19:36:42 +01:00

423 lines
9.2 KiB
CSS
Raw Blame History

/* ============================================================
TieMeasureFlow - Theme System
CSS Custom Properties for Light / Dark mode
============================================================ */
/* ---- Light Theme (Default) ---- */
:root {
--color-primary: #2563EB;
--color-primary-dark: #1E40AF;
--color-primary-light: #3B82F6;
--color-secondary: #64748B;
--color-accent: #1E40AF;
--color-pass: #059669;
--color-warning: #D97706;
--color-fail: #DC2626;
--bg-primary: #F8FAFC;
--bg-secondary: #F1F5F9;
--bg-card: #FFFFFF;
--bg-card-hover: #F8FAFC;
--text-primary: #0F172A;
--text-secondary: #475569;
--text-muted: #94A3B8;
--border-color: #E2E8F0;
--border-focus: #2563EB;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
--scrollbar-track: #F1F5F9;
--scrollbar-thumb: #CBD5E1;
--scrollbar-thumb-hover: #94A3B8;
}
/* ---- Dark Theme ---- */
.dark {
--color-primary: #60A5FA;
--color-primary-dark: #3B82F6;
--color-primary-light: #93C5FD;
--color-accent: #93C5FD;
--color-pass: #34D399;
--color-warning: #FBBF24;
--color-fail: #F87171;
--bg-primary: #0F172A;
--bg-secondary: #1E293B;
--bg-card: #334155;
--bg-card-hover: #3B4A63;
--text-primary: #F1F5F9;
--text-secondary: #94A3B8;
--text-muted: #64748B;
--border-color: #475569;
--border-focus: #60A5FA;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
--scrollbar-track: #1E293B;
--scrollbar-thumb: #475569;
--scrollbar-thumb-hover: #64748B;
}
/* ============================================================
Global Transitions
============================================================ */
*,
*::before,
*::after {
transition-property: background-color, border-color, color, box-shadow;
transition-duration: 0s;
}
/* Enable smooth transitions only after page load (avoid flash) */
html.theme-transitions *,
html.theme-transitions *::before,
html.theme-transitions *::after {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================================
Focus Ring
============================================================ */
*:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 2px;
border-radius: 4px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--border-focus);
}
/* ============================================================
Custom Scrollbar
============================================================ */
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* ============================================================
Utility: Card
============================================================ */
.tmf-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 0.75rem;
box-shadow: var(--shadow-sm);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.tmf-card:hover {
box-shadow: var(--shadow-md);
}
.tmf-card-header {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border-color);
font-weight: 600;
font-size: 0.875rem;
color: var(--text-primary);
}
.tmf-card-body {
padding: 1.25rem;
}
.tmf-card-footer {
padding: 0.75rem 1.25rem;
border-top: 1px solid var(--border-color);
background: var(--bg-secondary);
border-radius: 0 0 0.75rem 0.75rem;
}
/* ============================================================
Utility: Badges (Pass / Warning / Fail)
============================================================ */
.badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.625rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: 9999px;
line-height: 1.5;
white-space: nowrap;
}
.badge-pass {
background: rgba(5, 150, 105, 0.1);
color: #059669;
border: 1px solid rgba(5, 150, 105, 0.25);
}
.dark .badge-pass {
background: rgba(5, 150, 105, 0.15);
color: #34D399;
border-color: rgba(5, 150, 105, 0.3);
}
.badge-warning {
background: rgba(217, 119, 6, 0.1);
color: #D97706;
border: 1px solid rgba(217, 119, 6, 0.25);
}
.dark .badge-warning {
background: rgba(217, 119, 6, 0.15);
color: #FBBF24;
border-color: rgba(217, 119, 6, 0.3);
}
.badge-fail {
background: rgba(220, 38, 38, 0.1);
color: #DC2626;
border: 1px solid rgba(220, 38, 38, 0.25);
}
.dark .badge-fail {
background: rgba(220, 38, 38, 0.15);
color: #F87171;
border-color: rgba(220, 38, 38, 0.3);
}
.badge-neutral {
background: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border-color);
}
/* ============================================================
Utility: Buttons
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-primary {
background: var(--color-primary);
color: #FFFFFF;
border-color: var(--color-primary);
}
.dark .btn-primary {
background: #3B82F6;
color: #FFFFFF;
border-color: #3B82F6;
}
.btn-primary:hover:not(:disabled) {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
}
.dark .btn-primary:hover:not(:disabled) {
background: #2563EB;
border-color: #2563EB;
}
.btn-secondary {
background: transparent;
color: var(--text-secondary);
border-color: var(--border-color);
}
.btn-secondary:hover:not(:disabled) {
background: var(--bg-secondary);
color: var(--text-primary);
border-color: var(--text-secondary);
}
.btn-danger {
background: var(--color-fail);
color: #FFFFFF;
border-color: var(--color-fail);
}
.btn-danger:hover:not(:disabled) {
background: #B91C1C;
border-color: #B91C1C;
}
/* ============================================================
Utility: Form Inputs
============================================================ */
.tmf-input {
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--text-primary);
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tmf-input::placeholder {
color: var(--text-muted);
}
.tmf-input:focus {
outline: none;
border-color: var(--border-focus);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.dark .tmf-input:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.tmf-label {
display: block;
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 0.375rem;
}
/* ============================================================
Utility: Measurement Value Display
============================================================ */
.measure-value {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-weight: 500;
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
}
/* ============================================================
Utility: Table
============================================================ */
.tmf-table {
width: 100%;
font-size: 0.875rem;
border-collapse: collapse;
}
.tmf-table th {
padding: 0.625rem 1rem;
text-align: left;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
}
.tmf-table td {
padding: 0.625rem 1rem;
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
}
.tmf-table tbody tr:hover {
background: var(--bg-card-hover);
}
/* ============================================================
Alpine.js x-cloak (hide until Alpine loads)
============================================================ */
[x-cloak] {
display: none !important;
}
/* ============================================================
Tablet Touch Targets (44px minimum per WCAG 2.5.5)
============================================================ */
.touch-target {
min-height: 44px;
min-width: 44px;
}
@media (pointer: coarse) {
button,
.btn,
[role="button"],
a.inline-flex {
min-height: 44px;
}
/* Flash message dismiss button */
.fixed button[x-data] {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}
Reference in New Issue View Git Blame Copy Permalink