feat: add smart font colors for wood paneling backgrounds
- Add data-wood attribute to collections container for CSS targeting - Update woodPaneling.ts and woodPanelingInit.ts to set/remove attribute - Add CSS variables for wood-specific text colors (dark text on light wood, light text on dark wood) - Add !important rules to override theme colors when wood is active - Replace wood-dark and wood-mahogany textures with darker variants - Add subtle borders to book cards on wood backgrounds
This commit is contained in:
@@ -206,4 +206,53 @@
|
||||
.bg-wood-inactive {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
}
|
||||
|
||||
/* Smart text colors for wood paneling backgrounds */
|
||||
/* Wood Light - needs dark text for contrast */
|
||||
#collections-container[data-wood="wood-light"] {
|
||||
--wood-text-primary: #1a1a1a;
|
||||
--wood-text-secondary: #4a4a4a;
|
||||
--wood-border: #2a2a2a;
|
||||
}
|
||||
|
||||
/* Wood Dark - needs medium text */
|
||||
#collections-container[data-wood="wood-dark"] {
|
||||
--wood-text-primary: #d0d0d0;
|
||||
--wood-text-secondary: #a0a0a0;
|
||||
--wood-border: #5a4a3a;
|
||||
}
|
||||
|
||||
/* Wood Mahogany - needs light text (darkest background) */
|
||||
#collections-container[data-wood="wood-mahogany"] {
|
||||
--wood-text-primary: #f5f5f5;
|
||||
--wood-text-secondary: #c0c0c0;
|
||||
--wood-border: #5c3317;
|
||||
}
|
||||
|
||||
/* Apply wood-specific text colors to all text within collections container */
|
||||
#collections-container[data-wood] h1,
|
||||
#collections-container[data-wood] h2,
|
||||
#collections-container[data-wood] h3,
|
||||
#collections-container[data-wood] p,
|
||||
#collections-container[data-wood] span,
|
||||
#collections-container[data-wood] a,
|
||||
#collections-container[data-wood] button {
|
||||
color: var(--wood-text-primary) !important;
|
||||
}
|
||||
|
||||
#collections-container[data-wood] .text-sm,
|
||||
#collections-container[data-wood] .text-secondary,
|
||||
#collections-container[data-wood] p.text-sm {
|
||||
color: var(--wood-text-secondary) !important;
|
||||
}
|
||||
|
||||
/* Preserve accent color for links */
|
||||
#collections-container[data-wood] a[style*="accent"] {
|
||||
color: var(--accent) !important;
|
||||
}
|
||||
|
||||
/* Add subtle borders to book cards on wood backgrounds */
|
||||
#collections-container[data-wood] .book-card {
|
||||
border: 1px solid var(--wood-border);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user