Michael Mainguy
eb8b88c6da
Button improvements: - Primary buttons now more prominent with shadow, larger padding, and hover effects - Secondary buttons use ghost style for reduced visual weight - Added transform animations for better interactivity - Clear visual hierarchy between Create/Cancel actions Form and layout improvements: - Enhanced form inputs with better padding and hover states - Fixed white background issue on input focus (now uses theme colors) - Added browser autofill color fixes to prevent white-on-white text - Improved placeholder text visibility with proper theme colors - Added form-section card styling for better visual grouping Page layout enhancements: - Increased header padding and added subtle shadow - Better typography hierarchy with larger headings - Narrower content width (800px) for improved readability - More breathing room between sections CSS consolidation (continued): - AspectRatioSelector.css: 88→42 lines (52% reduction) - CreationActions.css: 96→57 lines (41% reduction) - EmptyPresentationState.css: 129→27 lines (79% reduction) - Updated components to use utility classes from application.css All changes maintain theme consistency and work in both light/dark modes. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
71 lines
1.8 KiB
CSS
71 lines
1.8 KiB
CSS
/* Component uses utility classes: .page-container, .page-header, .page-content */
|
|
|
|
/* Back Button - Subtle navigation link */
|
|
.back-button {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.375rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Header Content */
|
|
.header-content {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Creation Form - Better spacing and visual hierarchy */
|
|
.creation-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2.5rem;
|
|
}
|
|
|
|
/* Uses .flex .gap-4 .text-xs utility classes for theme-stats */
|
|
/* Uses .badge-secondary class for theme-stats span */
|
|
/* Uses .alert-error class for creation-error */
|
|
|
|
/* Aspect Ratio Selection */
|
|
/* aspect-ratio-selection: .mb-8 */
|
|
/* aspect-ratio-grid: .grid-auto-fill-250 .gap-4 */
|
|
/* aspect-ratio-card: .card .border-2 .cursor-pointer */
|
|
/* aspect-ratio-preview: .flex .justify-center .items-center .border-dashed */
|
|
|
|
/* Component-specific overrides only */
|
|
.aspect-ratio-card {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.aspect-ratio-card.selected {
|
|
border-color: var(--border-accent);
|
|
background: var(--bg-accent);
|
|
}
|
|
|
|
.aspect-ratio-preview {
|
|
height: 80px;
|
|
}
|
|
|
|
.preview-box {
|
|
background: var(--text-accent);
|
|
}
|
|
|
|
.preview-box.aspect-16-9 { width: 64px; height: 36px; }
|
|
.preview-box.aspect-4-3 { width: 60px; height: 45px; }
|
|
.preview-box.aspect-16-10 { width: 64px; height: 40px; }
|
|
|
|
/* Uses .badge-secondary for ratio-dimensions */
|
|
/* Uses .flex .gap-4 .flex-shrink-0 for action-buttons */
|
|
|
|
/* Uses .btn, .btn-primary, .btn-secondary classes from application.css */
|
|
/* Uses .loading-content, .error-content, .loading-spinner classes from application.css */
|
|
/* Responsive design handled by utility classes in application.css */ |