Will Miao
80ec9085dd
fix(theme): replace Gruvbox with Midnight, fix accent/info hue collisions and hardcoded colors
...
- Replace Gruvbox preset with Midnight (deep blue-purple, violet accent)
- Fix accent/info hue collisions in Nord, Monokai, Dracula, Solarized
- Fix Solarized error/warning collision (error-h 25->5) and WCAG contrast
- Make --color-skip-refresh-* follow --color-warning-h dynamically
- Replace hardcoded rgba(24,144,255) in onboarding.css with --color-accent
- Replace hardcoded #00B87A in import modals with --color-success
2026-06-18 18:57:53 +08:00
Will Miao
c5c7373e10
feat(theme): add 5 preset color themes (Nord/Gruvbox/Monokai/Dracula/Solarized) with popover selector
...
Implements Approach C (dual-attribute: data-theme + data-theme-preset),
keeping all 106 existing [data-theme="dark"] overrides unchanged.
- Colors: 5 professionally designed oklch palettes in tokens/colors.css
- UI: popover theme selector with mode (Light/Dark/Auto) + preset grid
- JS: cycleTheme(), setPreset(), localStorage persistence
- Locale: 12 new translation keys across 10 languages
- Polish: solid accent swatches matching flat token-driven aesthetic
2026-06-18 09:53:40 +08:00
Will Miao
5797ce9408
feat(phase-4): visual polish — font stack, shadow system, transitions, micro-interactions
...
Phase 4: Visual Polish
4.1 Font Stack Upgrade:
- Add --font-display token for headings
- Replace all hardcoded font-family: monospace with var(--font-mono)
- Replace hardcoded 'Segoe UI' stack with var(--font-body)
4.2 Shadow Elevation System:
- Add --shadow-2xl, --shadow-card/dropdown/modal/toast/header/dark-lg tokens
- Replace hardcoded shadows in header, menu, banner, shared, recipe-modal,
progress-panel, import-modal, alphabet-bar with semantic tokens
- Add dark theme shadow overrides with increased opacity
4.3 Transitions & Micro-interactions:
- Replace transition: all with specified properties (performance)
- Use --transition-fast/base/slow tokens instead of hardcoded 0.2s/0.3s
- Add :active scale feedback to modal buttons
- Enhance card hover with box-shadow + border-color lift
4.4 Dark Theme Refinement:
- Elevated shadow opacity for dark theme visibility
4.5 Density:
- Standardize container padding with --space-2 token
21 files changed
2026-06-09 14:07:36 +08:00
Will Miao
eb22054580
fix: add --surface-subtle token, restore info grouping, and apply theme-aware favorite color
...
- Add --surface-subtle (oklch 3% opacity) to replace rgba(0,0,0,0.03)
- Fix info items, creator-info, civitai-view, modal-send-btn, header-actions
to use --surface-subtle instead of --surface-hover
- Keep true hover states on --surface-hover
- Use light #d4a017 / dark #ffc107 for --favorite-color based on theme
- Replace hardcoded #ffc107 and #d4a017 with var(--favorite-color)
2026-06-09 09:27:11 +08:00
Will Miao
e849303763
fix(header): eliminate search input focus layout shift and reduce focus ring size
...
- Remove transform: translateY(-1px) that caused layout shift on focus
- Reduce box-shadow focus ring from 2px to 1px for subtler appearance
- Tone down drop-shadow from 4px/16px to 2px/8px (matches base state)
2026-05-06 09:33:04 +08:00
Will Miao
be75ad930e
feat(layout): implement responsive edge-to-edge card grid with density-aware column calculation
...
- Add dynamic column calculation based on container width and min card width
- Prevent tiny cards on narrow windows by respecting density-based minimums:
- Default: 240px, Medium: 200px, Compact: 170px
- Fix edge-to-edge layout with proper CSS selector (.virtual-scroll-item.model-card)
- Add hamburger menu for mobile/small screens with proper translations
- Update all locale files with 'common.actions.menu' key
Fixes: Cards becoming too small/overlapping on narrow window widths (e.g., 1156px)
Changes: 15 files, +569/-114 lines
2026-05-01 21:34:31 +08:00
mudknight
0ced53c059
Use flex gap for header spacing ( #901 )
...
* Use flex gap for header spacing
* Remove extra margin
2026-04-18 19:33:39 +08:00
Will Miao
eb30595d23
feat(header): improve CSS formatting and spacing
2026-01-07 16:20:46 +08:00
Will Miao
cb1f08d556
Fix low contrast on nav-item hover
2025-10-05 21:10:01 +08:00
Will Miao
3c7cdf5db8
feat(header): enhance navigation and search functionality with context-aware behavior
2025-10-05 20:58:14 +08:00
Will Miao
f6bd48cfcd
feat: Update box-shadow for header and adjust controls styling for improved layout
2025-08-27 15:43:44 +08:00
Will Miao
01843b8f2b
feat: Update media query breakpoints from 2000px to 2150px for improved responsiveness across components
2025-08-27 09:54:08 +08:00
Will Miao
31f6edf8f0
feat: enhance responsiveness of header container for larger screens
2025-08-04 17:19:04 +08:00
Will Miao
0d9003dea4
refactor: remove legacy card components and update imports to use shared ModelCard component
2025-07-25 22:00:38 +08:00
Will Miao
6f3aeb61e7
feat: Implement Git-based update functionality with nightly mode support and UI enhancements
2025-07-24 19:03:52 +08:00
Will Miao
5b4ec1b2a2
feat: implement disabled state for header search on statistics page with appropriate styling and functionality adjustments
2025-06-27 09:45:48 +08:00
Will Miao
c3dd4da11b
feat: enhance theme toggle functionality with auto theme support and icon updates. Fix #243
2025-06-21 20:43:44 +08:00
Will Miao
4e5c8b2dd0
Add help modal functionality and update related UI components
2025-06-09 14:55:18 +08:00
Will Miao
4cc6996406
Refactor theme toggle styles for improved positioning
...
- Updated CSS for the theme toggle component to ensure relative positioning for the container.
- Centered light and dark icons within the theme toggle using absolute positioning and transform properties.
- Added transition effects for opacity to enhance visual feedback during theme changes.
2025-03-22 09:49:15 +08:00
Will Miao
3620376c3c
Add search and filter functionality to header; adjust styles for responsiveness
2025-03-13 21:02:54 +08:00
Will Miao
e7233c147d
checkpoint
2025-03-13 15:04:18 +08:00
Will Miao
d69406c4cb
checkpoint
2025-03-09 15:42:00 +08:00
