Compact mode UI with smart output options

Encode page:
- Inline mode buttons: DCT | LSB | Color | Gray | JPEG | PNG
- LSB mode auto-selects Color+PNG and disables Gray/JPEG
- Dynamic hint text with icons below mode buttons

Decode page:
- Compact inline mode buttons: Auto | LSB | DCT
- Dynamic hints that change per mode selection

CSS:
- Disabled btn-check styling for dimmed unavailable options

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
2026-01-07 19:28:38 -05:00
parent 22cf27d7f6
commit 3f8c2a6957
3 changed files with 127 additions and 46 deletions

View File

@@ -91,6 +91,31 @@
min-width: 0;
}
/* Compact inline mode buttons */
.mode-btn.mode-btn-sm {
padding: 0.35rem 0.6rem;
padding-left: 1.75rem;
font-size: 0.8rem;
border-radius: 0.375rem;
border-width: 1px;
}
.mode-btn.mode-btn-sm .form-check-input {
left: 8px;
width: 14px;
height: 14px;
}
.mode-btn.mode-btn-sm i {
font-size: 0.85rem;
}
/* Disabled button labels for btn-check groups */
.btn-check:disabled + .btn {
opacity: 0.4;
pointer-events: none;
}
/* ----------------------------------------------------------------------------
Security Factor Boxes - Matches drop-zone dashed border style
---------------------------------------------------------------------------- */